Add numbers or alphabets to google markers API
Posted by navaneeth on Oct 13, 2012 in Google Maps, Javascript, Jquery | No comments yet

As part of Google Chart Tools we can generate markers that contain a letter or number, as well change the marker and font colors. So to recaps we can Add numbers or alphabets to Google markers API
Here the example code for this
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000' }); } </script> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>
Here in the icon
‘A’ – The letter shown on the marker. This can also be a letter, a symbol, or a combination of them all.
‘FF0000′ – The hex color of the marker
’000000′ – The hex color of the font used
and the map will look like this
Hope this will help you to add numbers or alphabets to Google markers API
Leave a Reply