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) {
				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 
					} , 

				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 
						} , 

					var marker = new google.maps.Marker(markerOptions);
					item.data("google-maps-marker", marker);

					google.maps.event.addListener(marker, "click", function() {
						infoWindow.open(map, marker);
					// Extends the bounds object with this location so we can fit the map to show all posts
                    var markerCluster = new MarkerClusterer(map, markers, { gridSize: 60,maxZoom: 8}); //poleouest
				if(mashupInfo.fitBounds) {

				// Trigger ready event
				element.trigger("pronamic-google-maps-ready", map);
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *