Fill info window by Ajax

If you have dynamic content in marker’s info window or if you don’t want to add their content in your data file, you can
request them by an Ajax request on your server.

As you set an id for every marker in your JSON or CSV file, you can retreive all data linked to a marker on your server using this id.

This tutorial use jQuery to send ajax request. One more time, you can use any Javascript frameworks, Maptimize is framework agnostic.

1 – Override click callbacks

Maptimize allows you to override all default behaviors implements by com.maptimize.MapController.

Maptimize has 2 click callbacks:

onMarkerClicked called when a user click on a single marker.
onClusterClicked called when a user click on a cluster. There are two use cases:
- The map is can zoom in to display cluster content.
- The map is already at zoom max and cannot display cluster content (when two markers are at the same location for instance).

To you overide those callbacks to open your own info window, you need to set them when you create a new MapController object:

// Attach maptimize controller to map object
var mapController = new com.maptimize.MapController(map, {onMarkerClicked: onMarkerClicked,
                                                          onClusterClicked: onClusterClicked });

2 – Implement `onMarkerClicked`

onMarkerClicked is called with the clicked marker method argument.
There is openPopup instance method on a marker that opens info window with a default loading message (we’ll see later how to change it).
This method needs a callback to populate the info window content. You just need to run your ajax request and change window content like this:

  function onMarkerClicked(marker) {
    // Open popup with a callback called to populate the infoWindow. 
    marker.openPopup(function(element) {
      // Request content by ajax on your server
      $.get("/api_ajax_content", { 'id[]': [marker.getId()] }, function(data) {
        element.innerHTML = data;
      });
    })
  }

3 – Implement `onClusterClicked`

This is the same principle but you need to handle the two use cases describe in the introduction. And you also need to request all cluster ids before running your ajax request liek this:

  function onClusterClicked(cluster) {
     // Keep the default behavior of zooming if possible
     if (cluster.canExpandOnMap()) {
       cluster.expandOnMap();
     // Override the default maptimize behavior of opening a popup with the cluster's content.
     } else {
       cluster.openPopup(function(element) {
         // Request cluster ids
         cluster.requestIds(function(ids) {
           // Request content by ajax on your server
           $.get("/api_ajax_content", { 'id[]': ids}, function(data) {
             element.innerHTML = data;
           });
         })
       });
    }
  }

4 – Change the default loading message.

As all requests are asynchronous, the first info window display a loading message. Default message is

<span class="maptimize_load_message">
  Loading, please wait...
</span>

To change this message set it in com.maptimize.MapController constructor options (option popupLoadingContent).

// Attach maptimize controller to map object
var mapController = new com.maptimize.MapController(map, {onMarkerClicked: onMarkerClicked,
                                                          onClusterClicked: onClusterClicked,
                                                          popupLoadingContent: "Your own loading message" });

Code

You can view/download the full example here.

Tutorial