<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Using Custom Marker Icons" height="300">
  <Require feature="sharedmap"/>
</ModulePrefs>
<Content type="html"><![CDATA[

<small>
This example changes the default red markers to blue icons by changing their
images using a markerOptions objetc literal.
</small>

<script>
var map = new GMap2();
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Create our "tiny" marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
		
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };

// Add 10 markers to the map at random locations
var bounds = map.getBoundsAsync(function(bounds) {
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 10; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
      southWest.lng() + lngSpan * Math.random());
    map.addOverlay(new GMarker(point, markerOptions));
  }
});
</script>

]]></Content>
</Module>
