// init function will be executed when dom is ready
function init() {
  if (GBrowserIsCompatible()) {
    // Create a new google map
    var map = new GMap2(document.getElementById('map_sample4'));
     
    // Center on the world
    map.setCenter(new GLatLng(47, 1), 4);
     
    // Add controls
    map.addControl(new GSmallMapControl());
    
    // Create my own theme using GIcon class, see Google Map documentation
    var theme = {
      markerOptions: {icon: new GIcon({ image:            "/images/maps.theme1/marker-pink.png",
                                 iconSize:         new GSize(20, 30),
                                 iconAnchor:       new GPoint(10, 30),
                                 infoWindowAnchor: new GPoint(10, 10),
                                 infoShadowAnchor: new GPoint(10, 30)                             
                                })},
      clusterOptions: {icon: new GIcon({ image:            "/images/maps.theme1/3.png",
                                  iconSize:         new GSize(62, 62),
                                  iconAnchor:       new GPoint(31, 31),
                                  infoWindowAnchor: new GPoint(31, 31),
                                  infoShadowAnchor: new GPoint(31, 31)                             
                                 }),
                        labelClass: 'maptimize_cluster_0', 
                        labelOffset: new GSize(-24, -24)},
                                 
      createMarker: function(marker) {
        return new GMarker(marker.getGLatLng(), theme.markerOptions);
      },

      createCluster: function(cluster) {
        var options = theme.clusterOptions;
        options.labelText = cluster.getCount();
        return new Maptimize.LabeledMarker(cluster.getGLatLng(), theme.clusterOptions);
      }
    }
    
    // Attach maptimize service
    var maptimizeMap = new Maptimize.Map(map, {
      theme: theme,
      
      onMarkerClicked: function(marker) {
        marker.getGMarker().openInfoWindowHtml('ID = ' + marker.getId());
      },

      onZoomMaxClusterClicked: function(cluster, ids) {
        cluster.getGMarker().openInfoWindowHtml('IDS = ' + ids);
      }
    });
  }
}

// Code based on Prototype. Of course you can use any JavaScript framework
// like jQuery for example : $(document).ready(init);
//
// Or use window onload event : window.onload = init;
document.observe('dom:loaded', init);