Content Management
- January 20, 2012
WordPress pronamic map plugin : add MarkererCluster function
The Pronamic map plugin is the best free replacement for the mappress plugin, which I buyed and  used for professionnal work. Well Pronamic map plugin comes with mashup functions but has not yet integrated the new google Cluster function, which aggreagtes multiple markes from the same location to a single one . We  publish here an update for the buildMashup function from the site.js file, which incorporates the clustering that you can view live on my brittany photogaphy web site. you will also need to include the markercluster script in your header or javascript enqueue function.
buildMashup: function(s) {
var element = $(s);
var list = element.find("ul");
var mashupInfo = $.parseJSON(element.find('input[name="pgmm-info"]').val());
var canvas = element.find(".canvas").get(0);
if(canvas) {
if(mashupInfo.hideList) {
list.hide();
}
var center = new google.maps.LatLng(mashupInfo.center.latitude, mashupInfo.center.longitude);
if(google.loader.ClientLocation) {
center = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
}
// Map options
var mapOptions = $.extend({
center: center
} ,
mashupInfo.mapOptions
);
var map = new google.maps.Map(canvas, mapOptions);
// Associated the Google Maps with the element so other developers can easily retrieve the Google Maps object
element.data("google-maps", map);
// Create one info window where the details from the posts will be displayed in
var infoWindow = new google.maps.InfoWindow();
// Create an bounds object so we can fit the map to show all posts
var bounds = new google.maps.LatLngBounds();
var markers = [];
// Create markers for all the posts
list.find("li").each(function() {
var item = $(this);
// Retrieve location information from an (hidden) input field with JSON data
var info = $.parseJSON(item.find('input[name="pgm-info"]').val());
var location = new google.maps.LatLng(info.latitude, info.longitude);
var markerOptions = $.extend({
position: location ,
map: map
} ,
info.markerOptions
);
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
item.data("google-maps-marker", marker);
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(item.html());
infoWindow.open(map, marker);
});
// Extends the bounds object with this location so we can fit the map to show all posts
bounds.extend(location);
});
var markerCluster = new MarkerClusterer(map, markers, { gridSize: 60,maxZoom: 8}); //poleouest
if(mashupInfo.fitBounds) {
map.fitBounds(bounds);
}
// Trigger ready event
element.trigger("pronamic-google-maps-ready", map);
}
}



