// 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_sample3'));
// Center on the world
map.setCenter(new GLatLng(47, 1), 4);
// Add controls
map.addControl(new GSmallMapControl());
// Attach maptimize service
var maptimizeMap = new Maptimize.Map(map, {
onMarkerClicked: function(marker) {
// 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, when receive response, open info window with response as content
return new Ajax.Request("/api_ajax_content/", {
method: 'GET',
parameters: {id: marker.getId()},
onComplete: function(response) {
marker.getGMarker().openInfoWindowHtml(response.responseText);
}
});
},
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
// set ids as parameter of the request
return new Ajax.Request("/api_ajax_content/", {
method: 'GET',
parameters: {id: ids.join('|')},
onComplete: function(response) {
cluster.getGMarker().openInfoWindowHtml(response.responseText);
}
});
}
});
}
}
// 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);