1- Click on single object: opens information window on map

2- Click on main icon of cluster: zoom in to cluster

3- Click on circle icon of cluster thumbnail: opens information window on map and by repeating click it displays the next object’s information

1- If the thumbnail is selected and the photo does not exist, the following default photo is used:

2- You can design, the content of information window in the function “createInfoWindow” of markerX class in markerFunctions.js

3- To apply a new clustering using the same object that has already been used, first use clean() function to destroy the previous clustering on map.

var options = {};
options.clusteringMethod = "gridBased";
options.serverClient = "client"; // “client”, “server”
options.markerStyle = thumbnail; // “thumbnail”, “marker1”
options.markerColor = “yellow”; // “yellow”, “green”, “red”, “blue”
options.representativeType = "mean"; // “mean”, “first”, “middleCell”
options.markerSingleWidth = 48; // width of single marker on map
options.markerClusterWidth = 48; // width of cluster marker on map
options.markerSingleHeight = 39; // height of single marker on map
options.markerClusterHeight = 39; // height of cluster marker on map

var clusteringObj = new mopsiMarkerClustering(map, options); // constructor, map: Google map object
if (clusteringObj.validParams == "YES" ) { // validParams: “YES” or “NO”
   // add data objects
   // supposing your data is in the array data
   for ( var i = 0 ; i < data.length ; i++ ) {
     // creating objects one by one and adding to clusteringObj using the function: addObject
     obj = {};
     obj.lat = data[i].lat;
     obj.lon = data[i].lon;
     // optional,
     obj.photourl = data[i].photourl; // photourl: full path of a photo on server
     obj.thumbnail = data[i].thumbnail; // photourl: full path of a photo thumbnail on server
     obj.name = data[i].name;
     clusteringObj.addObject(obj); // adds object to the array markersData of clusteringObj
   }
   clusteringObj.apply(); // performing clustering algorithm and displaying markers
}

var options = {};
options.clusteringMethod = "gridBased";
options.serverClient = "server"; // “client”, “server”
options.markerStyle = thumbnail; // “thumbnail”, “marker1”
options.markerColor = “yellow”; // “yellow”, “green”, “red”, “blue”
options.representativeType = "mean"; // “mean”, “first”, “middleCell”
options.markerSingleWidth = 48; // width of single marker on map
options.markerClusterWidth = 48; // width of cluster marker on map
options.markerSingleHeight = 39; // height of single marker on map
options.markerClusterHeight = 39; // height of cluster marker on map

var clusteringObj = new mopsiMarkerClustering(map, options); // constructor, map: Google map object
if (clusteringObj.validParams == "YES" ) { // validParams: “YES” or “NO”
   clusObj.dataBounds = findDataBounds(dataSize);
   clusObj.nonSpatial = true;
   clusteringObj.apply();
}

1. Create a folder named "temp" for temporary built clustering files.
    Give full write permission to the folder.
2. In the file markerClustering.php, give relative path for photos and their thumbnails on server
3. In the file markerClustering.php, set the variable "pathAPI" to full path of clustering API on server
4. To read from database, send query to mcluster.c when it is called from markerClustering.php.
    Then, in the function "readData" in mcluster.c, read data from database and set the variable "data"