Icons on Google Maps

[ Home ] [ Up ] [ Site Map ]

 


 
 
 

Contact me!

apratt@
bestbits.org
 

Icons on Google Maps

To plot your own icons on Google Maps, write JavaScript as below. Bold items are where you put in your own data. "East" is longitude (negative for west) like this: -122.00417. "North" is latitude like this: 37.33583.

<HEAD>
    <script src="http://maps.google.com/maps?file=api&v=1&key="site_registration_key" type="text/javascript"></script>
</HEAD>
<BODY onload="loadMap();">
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
function loadMap(){ var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(center_east, center_north), 5);
var icon1 = new GIcon();
icon1.image = "icon_image_url";
icon1.shadow = "icon_image_url";
icon1.iconSize = new GSize(icon1_width, icon1_height);
icon1.shadowSize = new GSize(1, 1);
icon1.iconAnchor = new GPoint(8, 8);
icon1.infoWindowAnchor = new GPoint(5, 1);
var point1 = new GPoint(marker_east, marker_north);
var marker1 = new GMarker(point1, icon1);
map.addOverlay(marker1);
GEvent.addListener(marker1, "click", function() { marker1.openInfoWindowHtml("window_text"); });

}
//]]>
</script>

One kind of marker_image_url is "http://www.findu.com/cgi-bin/gmapicon.cgi?call=LABEL&icon=/<" which produces a motorcycle image and a label with whatever text you want. The icon_width,icon_height for this should be about 90,20. I don't know about shadowSize and iconAnchor - maybe it's "which pixel in the icon should be at the exact map spot?" Also don't know about the windowAnchor. The window_text can be (for instance) "LABEL<br> --- Report received 1 hours 32 minutes 29 seconds ago<br> Course: 91.0 Speed: 24.0<br> Altitude: 52"

You can put many icons on a map by repeating the pattern for icon1, point1, and marker1 above.
 

This page was last edited April 26, 2008.