Logo

Use ajax request to fill window content

// 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);
Development Xilinus | Design Webalys