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

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

   <script src="http://mapeed.com/api/beta/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://mapeed.com/stylesheets/cluster.css" rel="stylesheet" type="text/css" />

3. Attach your Google Map to Mapeed.

   var mapeedMap = new Mapeed.Map(map); // map is a GMap2 object

   View full code

With only two lines of code, you have the Mapeed plugin on your map with default Mapeed behavior: When you click on a cluster, Mapeed 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 Mapeed.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 mapeedMap = new Mapeed.Map(map, {
  onMarkerClicked: function(marker, id) {
    // marker: is an instance of Mapeed.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 Mapeed.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 mapeedMap = new Mapeed.Map(map, {
  onMarkerClicked: function(marker, id) {
    // marker: is an instance of Mapeed.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 Mapeed plugin. Enjoy this unique readability !

Optional step : customize the design.

Mapeed 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.
To be able to change them, you need to use callbacks onMarkerReceived/onClusterReceived.
Those callbacks are called before creating GMarker (Google Marker) and let you create your own GMarker.

var myMarker = 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)                             
                          });

var mapeedMap = new Mapeed.Map(map, {
  onMarkerReceived: function(marker) {
    marker.createGMarker({ icon : myMarker });
    // You can also bind any Google Map event on the GMarker like this
    // GEvent.bind(marker.getGMarker(), "click", this, function() {...});
    // 
    // http://code.google.com/apis/maps/documentation/reference.html
  },  
});