The simplest javascript code to display markers and clusters using Maptimize.

1. Include Maptimize JavaScript file after Google Maps JavaScript file.

   <script src="http://maptimize.com/api/v1/MAP_KEY/embed.js" type="text/javascript"></script>

   You will find your MAP_KEY in your dashboard when you are logged in.
2. Include our CSS to handle default markers and clusters design.

   <link href="http://maptimize.com/stylesheets/cluster.css" rel="stylesheet" type="text/css" />

3. Attach your Google Map to Maptimize.

   var maptimizeMap = new Maptimize.Map(map); // map is a GMap2 object

   View full code

With only two lines of code, you have the Maptimize service on your map with default Maptimize behavior: When you click on a cluster, Maptimize adapts zoom and position of the to display cluster content.

Now, let's see how we can bind a behavior on the click event.

How to bind actions on click for clusters and markers.

There are two callbacks on Maptimize.Map object called when a user clicks on a marker or a cluster when zoom in is not possible anymore (markers at the same address).

Those callbasks are :

• onMarkerClicked(marker)
• onZoomMaxClusterClicked(cluster)

Here is how to use them to open an infoWindow :

var maptimizeMap = new Maptimize.Map(map, {
  onMarkerClicked: function(marker, id) {
    // marker: is an instance of Maptimize.Marker
    // id:     is the id you set for this marker in your CSV file
    marker.getGMarker().openInfoWindowHtml('ID = ' + id);
  },
  onZoomMaxClusterClicked: function(cluster, ids) {
    // cluster: is an instance of Maptimize.Cluster
    // ids:     is an Array of all ids you set in your CSV file that are included in this cluster
    cluster.getGMarker().openInfoWindowHtml('IDS = ' + ids);
  }
});

Now, your map is interactive. Let's see how to customize window's content.

Set info window content by Ajax.

Actions are the same as the example above but it runs an Ajax request to get window content.
Info window will be open after receiving server response.

The code is based on Prototype JavaScript Framework but can be done with any JavaScript framework.

var maptimizeMap = new Maptimize.Map(map, {
  onMarkerClicked: function(marker, id) {
    // marker: is an instance of Maptimize.Marker
    // id:     is the id you set for this marker in your CSV file
  
    // Use Ajax.Request prototype Object (you can use any JS framework)
    // Set id as parameter of the request. 
    // Open info window with response as content when receive response
    return new Ajax.Request("/api_ajax_content/", {
      method: 'GET',
      parameters: {id: id},
      onComplete: function(response) {
        marker.getGMarker().openInfoWindowHtml(response.responseText);
      }
    });
  },
  onZoomMaxClusterClicked: function(cluster, ids) {
    // ...
  }
});

Well done ! Your map is now enhanced by the Maptimize service. Enjoy this unique readability !

Optional step : customize the design.

Maptimize provides default images for markers and clusters as you can see on our demos.
Of course, you can change them exactly as you would do with Google Maps.
In V1 version, we have introduced a map theme. A theme is a Javascript object that implements two methods:

• createMarker: function(marker)
• createCluster: function(cluster)

// 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,
  ...
});