Marker Clustering Functionality

includes/google-maps/includes/functions.php

@@ -122,7 +122,7 @@ function pmpromd_show_google_map( $attributes, $members ) {
 	$query_params = array_map( 'sanitize_text_field', $query_params );
 
 	wp_enqueue_script( 'pmpromd-google-maps', add_query_arg( $query_params, 'https://maps.googleapis.com/maps/api/js' ), array(), PMPRO_MEMBER_DIRECTORY_VERSION, array( 'strategy'  => 'async' ) );
-	wp_register_script( 'pmpromd-google-maps-javascript', plugin_dir_url( dirname( __FILE__ ) ) . 'js/map.js', array( 'jquery' ), PMPRO_MEMBER_DIRECTORY_VERSION ); // This changes to `map.js`
+	wp_register_script( 'pmpromd-google-maps-javascript', plugin_dir_url( dirname( __FILE__ ) ) . 'js/map.js', array( 'jquery', 'pmpromd-google-maps' ), PMPRO_MEMBER_DIRECTORY_VERSION ); // This changes to `map.js`
 
 	/**
 	 * @deprecated 2.1 - use `pmpromd_default_map_start` instead.
@@ -162,6 +162,22 @@ function pmpromd_show_google_map( $attributes, $members ) {
 		'map_styles' => $map_styles		
 	);
 
+	/**
+	 * Allow marker clustering to be enabled which clusters 2 or more markers together at specific zoom levels.
+	 * 
+	 * @since TBD
+	 * 
+	 * @param bool $show_cluster Whether to show marker clustering on the map. Defaults to true.
+	 */
+	$enable_marker_clustering = apply_filters( 'pmpromd_map_cluster_markers', true );
+	if ( $enable_marker_clustering ) {
+		$pmpromd_map_attributes['plugin_url'] = plugin_dir_url( dirname( __FILE__ ) );
+		$pmpromd_map_attributes['show_cluster'] = true;
+		wp_enqueue_script( 'pmpromd-google-maps-cluster', plugin_dir_url( dirname( __FILE__ ) ) . 'js/marker-cluster.min.js', array( 'pmpromd-google-maps' ), PMPRO_MEMBER_DIRECTORY_VERSION, array( 'strategy'  => 'async' ) );
+	} else {
+		$pmpromd_map_attributes['show_cluster'] = false;
+	}
+
 	wp_localize_script( 'pmpromd-google-maps-javascript', 'pmpromd_vars', $pmpromd_map_attributes );
 	wp_enqueue_script( 'pmpromd-google-maps-javascript' );
 

includes/google-maps/js/map.js

@@ -36,6 +36,9 @@ function pmpromd_init_map(){
 	}
 
 	var pmpromd_infowindows = new Array();
+
+	// Array to store all markers for clustering
+	var pmpromd_markers = new Array();
 
 	//Making sure we actually have pmpromd_markers
 	if( typeof pmpromd_vars.marker_data !== 'undefined' ){
@@ -58,7 +61,6 @@ function pmpromd_init_map(){
 
 			var pmpromd_marker = new google.maps.Marker({
 				position: pmpromd_latlng,
-				map: pmpro_map,
 				content: pmpromd_contentString,
 				pmpromd_infowindow: pmpromd_infowindow
 			});
@@ -74,9 +76,26 @@ function pmpromd_init_map(){
 			    };
 			})(pmpromd_marker,pmpromd_contentString,pmpromd_infowindow));  
 
-
+			// Add marker to the array instead of directly to the map
+			pmpromd_markers.push(pmpromd_marker);
 		}
 
+		// Only show clusters if PHP filter is enabled. 
+		if ( pmpromd_vars.show_cluster === "1" || pmpromd_vars.show_cluster === 1 ) {
+			var markerClusterOptions = {
+				imagePath: pmpromd_vars.plugin_url + 'images/m',
+				gridSize: 50,
+				maxZoom: 10,
+				minimumClusterSize: 2
+			};
+
+			new MarkerClusterer(pmpro_map, pmpromd_markers, markerClusterOptions);
+		} else {
+			// Place all markers on the map (fallback if clustering is disabled).
+			for (var i = 0; i < pmpromd_markers.length; i++) {
+				pmpromd_markers[i].setMap(pmpro_map);
+			}
+		}
 	}
 
-};
+};