• Eyelash / php jquery image management
  • 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);
    			}
    		}

    Quick contact form