|
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. |