Google maps: place number in marker?

Question

How can I display a number in the marker on a google map? I want to do server side clustering and I need to display how many points the cluster represents.

Answer 1

Best solution would be to pass a remote or local image and text to a server side script through a url. When plotting the markers, you would use this url as the icon's value, and the server side script return a copy of your supplied image (never saved on the server mind you) with the text baked into image. Thus you could render numbers or text on custom marker images real-time as you drop them on the map.

Here is the tutorial on my blog on how to do this. - http://www.devinrolsen.com/google-maps-marker-icons-with-numbers-using-php-gd/

Answer 2

Latest google js API has google.maps.MarkerLabel object.

So you can easily set text/styles for labels

var mIcon = {
  path: google.maps.SymbolPath.CIRCLE,
  fillOpacity: 1,
  fillColor: '#fff',
  strokeOpacity: 1,
  strokeWeight: 1,
  strokeColor: '#333',
  scale: 12
};

var gMarker = new google.maps.Marker({
  map: gmap,
  position: latLng,
  title: 'Number 123',
  icon: mIcon,
  label: {color: '#000', fontSize: '12px', fontWeight: '600',
    text: '123'}
});

jsfiddle

Answer 3

You can use labels over markers, here is a tutorial about GIcon.label.

You can also use GMarker.openInfoWindow.

Tip: This is the best tutorial I found about google maps api (of course after Official documentation)

Answer 4

<hr/>
1. add Google maps script To _Layout page.<br/>
     &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;   &lt;/script &gt;
<hr/>
2. Add script to your view page.

  &lt;script type="text/javascript" &gt;<br/>
   var mapLocation = [['Lucknow', 26.74561, 80.859375],<br/>
                    ['New Delhi', 28.613459, 77.695313],<br/>
                    ['Jaipur', 26.980829, 75.849609],<br/>
                    ['Ahmedabad', 22.674847, 72.333984],<br/>
                    ['Mumbai', 18.760713, 73.015135]];<br/>
    $(document).ready(function () { initialize(); });

//At view initialize load default map

function initialize() {<br/>
        var latLng = new google.maps.LatLng(22.917923, 76.992188);<br/>
        var myOptions = { center: latLng, zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };<br/>
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarker(map, mapLocation);
    }

function setMarker(map, mapLoc) {
    for (i = 0; i < mapLoc.length; i++) {
        var loca = mapLoc[i];
        var myLanLat = new google.maps.LatLng(loca[1], loca[2]);
        var marker = new google.maps.Marker({
            position: myLanLat,
            icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ ( i     + 1) +'|FF776B|000000',
            shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow',
            map: map,
            tittle: loca[0],
            zIndex: loca[3]
        });
    }
}

Answer 5

icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000'

Looks fine with 1-digit and 2-digit numbers

(from Mauro's link)