Lifeline, CLever, and L3D 

<< Back to Working

Google Maps API - Creating Markers

The Code:

<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAHcNh3mmTQyAZpWp_BdIcjhRW3ahPvXi-1UokraFc4d7K2_KhwRSeChMKIkZTdOZUOygA_Q9_egtSGw" type="text/javascript"></script>
</head>

<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">

//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.241944, 37.441944), 4);

function createMarker(point, number)
{
var marker = new GMarker(point);
// show this marker's index in the info window when its clicked
var html = "Marker #<b>" + number+"</b>";

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);});
return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;

for( var i=0; i<10; i++)
{
var point = new GPoint(bounds.minX+width*Math.random(), bounds.minY+height*Math.random());
var marker = createMarker(point, i+1);
map.addOverlay(marker);
}
//]]>
</script>
</body>