added marker cluster

README.md

@@ -1,6 +1,8 @@
 
 # MAP
 
+todo:
+
 - [changed plugin directory in wp](https://wordpress.stackexchange.com/questions/120075/how-to-change-location-of-the-plugins-wordpress-themes-folder)
 - googlemap api key :  AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE
 - [discussion on googlemap wp implementation](https://wordpress.org/support/topic/google-maps-where-to-place-api-key/)

srcs/plugins/map_prof/map_prof_hooks.php

@@ -15,7 +15,9 @@ Author URI:
  */
 
 $mp_api_key = 'AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE';
-$mp_marker_icon = '/wp-content/plugins/map_prof/marker.png';
+$mp_icon_url = '/wp-content/plugins/map_prof/marker.png';
+$mp_icon_size = [50, 50];
+$mp_icon_label_color = "red";
 
 
 
@@ -34,11 +36,15 @@ require_once(dirname(__FILE__) . '/mp_add_to_scripts.php');
  */
 
 function mp_enqueue_scripts() {
-	wp_enqueue_style( 'mp_style',		plugins_url('mp_style.css', __FILE__),		'',					'',	'');
+	// https://developers.google.com/maps/documentation/javascript/marker-clustering
-	wp_enqueue_script('mp_init_map',	plugins_url('mp_init_map.js', __FILE__),	'',					'',	true);
+	$marker_clusterer = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js";
-	wp_enqueue_script('mp_google_api',	mp_url_api(),								['mp_init_map'],	'',	true);
+
-	mp_get_locations();
+	wp_enqueue_style( 'mp_style',				plugins_url('mp_style.css', __FILE__),		'',						'',	'');
-	mp_get_markers();
+	wp_enqueue_script('mp_marker_clusterer',	$marker_clusterer,							'',						'', true);
+	wp_enqueue_script('mp_init_map',			plugins_url('mp_init_map.js', __FILE__),	['mp_marker_clusterer'],'',	true);
+	wp_enqueue_script('mp_google_api',			mp_url_api(),								['mp_init_map'],		'',	true);
+
+	mp_add_to_scripts();
 }
 add_action( 'wp_enqueue_scripts', 'mp_enqueue_scripts' );
 

srcs/plugins/map_prof/mp_add_to_scripts.php

@@ -13,17 +13,46 @@ function mp_get_locations() {
 		$locations .= ',';
 	};
 	$locations .= '];';
-
+	return $locations;
-	wp_add_inline_script('mp_init_map', $locations, 'before');
 }
 
-function mp_get_markers() {
+function mp_get_icon_url() {
-	global $mp_marker_icon;
+	global $mp_icon_url;
 	$markers  =
 		  'let icon_url = "'
-		. $mp_marker_icon
+		. $mp_icon_url
 		. '";'
 	;
-	wp_add_inline_script('mp_init_map', $markers, 'before');
+	return $markers;
 }
+
+function mp_get_icon_size() {
+	global $mp_icon_size;
+	$markers  =
+		  'let icon_size = ['
+		. $mp_icon_size[0]
+		. ", "
+		. $mp_icon_size[1]
+		. '];'
+	;
+	return $markers;
+}
+
+function mp_get_icon_color() {
+	global $mp_icon_label_color;
+	$markers  =
+		  'let icon_label_color = "'
+		. $mp_icon_label_color
+		. '";'
+	;
+	return $markers;
+}
+
+function mp_add_to_scripts() {
+	wp_add_inline_script('mp_init_map', mp_get_locations(), 'before');
+	wp_add_inline_script('mp_init_map', mp_get_icon_url(), 'before');
+	wp_add_inline_script('mp_init_map', mp_get_icon_size(), 'before');
+	wp_add_inline_script('mp_init_map', mp_get_icon_color(), 'before');
+}
+
 ?>

srcs/plugins/map_prof/mp_init_map.js

@@ -2,8 +2,9 @@ function mp_init_map() {
 
 	/*
 	 * following variable are created by mp_locations.php
-	 * - let locations
+	 * - let locations = [{lat:xxx, lng:xxx}, {}...]
 	 * - let icon_url
+	 * - let icon_size[x, y]
 	 */
 
 	let map = new google.maps.Map(
@@ -14,16 +15,26 @@ function mp_init_map() {
 			center: locations[0],
 		}
 	);
-	let marker, icon;
+	let marker, icon, label;
 	icon = {
 		url: icon_url,
-		scaledSize: new google.maps.Size(35, 50)
+		scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
 	};
+	label = {
+//		text: String(count),
+		text: "hello",
+		color: icon_label_color,
+		fontSize: "12px",
+	};
+	let markers = [];
 	for (loc of locations) {
 		marker = new google.maps.Marker({
 			position: loc,
 			map: map,
 			icon: icon,
+	//		label: label,
 		});
+		markers.push(marker);
 	};
+	new markerClusterer.MarkerClusterer({ map, markers });
 }