Maptimize JavaScript API v2.0

Introduction

The Maptimize JavaScript API consists of a single <script> tag to add to your web page that provides objects and methods to add clustering and filtering features to a given Google Maps map.

It encapsulates event handling and communication with Maptimize clustering engine, while offering support for customization.

How to start

The Maptimize JavaScript API depends on Google Maps API v2.x.

Loading Google Maps API the classic way

<!-- Include Google AJAX API script -->
<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script> 
<!-- Include Maptimize JavaScript API -->
<script src="http://maptimize.com/api/v2/ABCDEF/embed.js" type="text/javascript"></script>
<!-- Include Maptimize stylesheets FIXME: couldn't we skip this using inline styles ?? -->
<link href="http://maptimize.com/stylesheets/cluster.css" rel="stylesheet" type="text/css" />

Then later inside a script tag or an external included script.

if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(0,0), 3);
  // Initialize Maptimize map controller
  var mapController = new com.maptimize.MapController(map);
  // Fetch and draw markers and clusters
  mapController.refresh();
}

Using the Google AJAX API Loader

<!-- Include Google AJAX API script -->
<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script> 
<!-- Include Maptimize JavaScript API -->
<script src="http://maptimize.com/api/v2/ABCDEF/embed.js" type="text/javascript"></script>
<!-- Include Maptimize stylesheets FIXME: couldn't we skip this using inline styles ?? -->
<link href="http://maptimize.com/stylesheets/cluster.css" rel="stylesheet" type="text/css" />

Then later inside a <script> or an external included script.

// Load Google Maps API version > 2
google.load("maps", "2.x");

google.setOnLoadCallback(function() {
  var map = new google.maps.GMap2(document.getElementById('map'));
  map.setCenter(new google.maps.LatLng(4419, -122.1419), 13);
  // Initialize Maptimize map controller
  var mapController = new com.maptimize.MapController(map);
  // Fetch and draw markers and clusters
  mapController.refresh();
});

Handling events (TODO)

You can add event listener to do some actions

Current event list supported by Maptimize is:

beforeRefresh
afterRefresh
markerClicked
clusterClicked

Use Google Map GEvent class to add or remove event listeners.

Example to display how many markers are displayed on a map

GEvent.addListener(maptimizeMap, 'afterRefresh', function() {
  document.getElementById('counter').innerHTML = mapController.getTotalPointsCount() + " markers on the map"
});

Sections

Maptimize

Maptimize JavaScript API v2.0