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