ansaurus

Question

How can I create numbered map markers in Google Maps V3?

Answer 1

+1 A:

You may want to download a set of numbered icons from the sources provided at this site:

Google Marker Icons

Then you should be able to do the following:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 

    <script type="text/javascript"> 
    function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      for (var i = 0; i < locations.length; i++) {
          var image = new google.maps.MarkerImage('marker' + i + '.png',
                      new google.maps.Size(20, 34),
                      new google.maps.Point(0, 0),
                      new google.maps.Point(10, 34));

          var location = locations[i];
          var myLatLng = new google.maps.LatLng(location[1], location[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon: image,
              title: location[0],
              zIndex: location[3]
          });
      }
    }
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

Screenshot from the above example:

Google Numbered Marker Icons

Note that you can easily add a shadow behind the markers. You may want to check the example at the Google Maps API Reference: Complex Markers for more info about this.

Daniel Vassallo 2010-03-12 23:37:46

I'd like to add text on top, not just use numbered images. Is that possible?

kaneuniversal 2010-03-14 15:00:02

Answer 2

+2 A:

Unfortunately it's not very easy. You could create your own custom marker based on the OverlayView class (an example) and put your own HTML in it, including a counter. This will leave you with a very basic marker, that you can't drag around or add shadows easily, but it is very customisable.

Alternatively, you could add a label to the default marker. This will be less customisable but should work. It also keeps all the useful things the standard marker does.

You can read more about the overlays in Google's article Fun with MVC Objects.

Edit: if you don't want to create a JavaScript class, you could use Google's Chart API. For example:

Numbered marker: http://chart.apis.google.com/chart?chst=d_map_pin_letter&amp;chld=7|FF0000|000000
Text marker: http://chart.apis.google.com/chart?chst=d_map_spin&amp;chld=1|0|FF0000|12|_|foo

This is the quick and easy route, but it's less customisable, and requires a new image to be downloaded by the client for each marker.

dave1010 2010-05-07 12:29:14

Thank you, Dave -- I've already solved this with numbered images (an approach I didn't want to use, but made the most sense given the time constraints), but I like the Chart API approach as well.

kaneuniversal 2010-05-11 18:21:16

Using the Charts API is my preferred approach.

broady 2010-10-11 15:59:34

Answer 3

A:

My two cents showing how to use the Google Charts API to solve this problem:

http://www.pushittolive.com/post/1285227235/google-maps-markers-with-numbers-or-text

Cheers, Sebastian

sebastian serrano 2010-10-10 19:56:44

Clever! I already have my numbered images, but I like this approach a lot.

kaneuniversal 2010-10-11 15:19:06

ansaurus

tags:

views:

answers:

How can I create numbered map markers in Google Maps V3?

related questions