how to add numbering on each markers in Google maps v3?

I want to ask you all about how to add number dynamically on each markers in Google Maps v3 with JavaScript. For example, the first marker is 1, the second one is 2, etc. In this case I have position data like this :

[
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000), 
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(54.0000, -2.0000),
 new google.maps.LatLng(51.6000, -1.2500),
 new google.maps.LatLng(51.7500, -1.2500)
];

But that data dynamically change. So for the first position lat/long I will give the number 1 on first marker, number 2 for the second marker, etc. And also i have use the icon each marker with this :

"http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900"

Do I have to change the marker icon? I really need your suggest or example code to fix the problem. Please help. Thank You very much for the help.

You can keep your starred pin icon and add an unobtrusive label next to it. This label can say anything but I kept it to simply a number. It is the MarkerWithLabel library (download here)

DEMO http://jsfiddle.net/yV6xv/21/

You need to define a CSS for it too.

  .labels {
     color: blue;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     white-space: nowrap;
   }

And replace your regular Marker with MarkerWithLabel:

for (var i = 0; i < point.length; i++) {
    var marker = new MarkerWithLabel({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow,
        labelContent: i,
        labelAnchor: new google.maps.Point(12, -5),
        labelClass: "labels"
    });
}

Including in the HTML file

  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      .labels {
        color: blue;
        background-color: white;
        font-family: "Lucida Grande", "Arial", sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        width: 25px;
        border: 1px solid black;
        white-space: nowrap;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>

    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      ...

You can do this in multiple ways. Changing the marker image is one, but requires you to make all those marker images. Another is to use the StyledMarker library which is part of the Google Maps API Utility Library.

来源：https://stackoverflow.com/questions/10958722/how-to-add-numbering-on-each-markers-in-google-maps-v3

标签

javascript

google-maps-api-3

google-maps-markers