infowindow centered

srcs/plugins/map_prof/map_prof_hooks.php

@@ -95,6 +95,7 @@ function mp_add_div() {
 	wp_enqueue_style( 'mp_style',				plugins_url('styles/mp_style.css', __FILE__),			'',						'',	false);
 	wp_enqueue_script('mp_info_window',			plugins_url('scripts/mp_info_window.js', __FILE__),		'',						'',	false);
 	wp_enqueue_script('mp_create_markers',		plugins_url('scripts/mp_create_markers.js', __FILE__),	'',						'',	false);
+	wp_enqueue_script('mp_draw_clusters',		plugins_url('scripts/mp_draw_clusters.js', __FILE__),	'',						'',	false);
 	wp_enqueue_script('mp_marker_clusterer',	$marker_clusterer,										'',						'', true);
 	wp_enqueue_script('mp_init_map',			plugins_url('scripts/mp_init_map.js', __FILE__),		['mp_marker_clusterer'],'',	true);
 	wp_enqueue_script('mp_google_api',			mp_url_api(),											['mp_init_map'],		'',	true);

srcs/plugins/map_prof/scripts/mp_draw_clusters.js

@@ -0,0 +1,49 @@
+function draw_clusters(map, markers) {
+
+	/*
+	 * following variable are created by mp_add_to_script.php
+	 * - let icon_color = ""
+	 * - let icon_color_back = ""
+	 * - let icon_size = [x, y]
+	 * - let cluster_size_factor = Number
+	 */
+
+	let renderer = {
+		render({ count, position }, stats) {
+
+			/* CLUSTERS SETTINGS */
+
+			let cluster_icon_size = [
+				icon_size[0] + ( cluster_size_factor * (count - 2) ),
+				icon_size[1] + ( cluster_size_factor * (count - 2) )
+			];
+			let cluster_svg = window.btoa(`
+				<svg xmlns="http://www.w3.org/2000/svg" width="${cluster_icon_size[0]}" height="${cluster_icon_size[1]}">
+					<circle cx="50%" cy="50%" r="37%" stroke="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
+				</svg>
+			`);
+			let cluster_icon = {
+				url: `data:image/svg+xml;base64,${cluster_svg}`,
+				scaledSize: new google.maps.Size(cluster_icon_size[0], cluster_icon_size[1]),
+			};
+			let cluster_label = {
+				text: String(count),
+				color: "#ba197a",
+				fontSize: "12px",
+				fontWeight: "bold",
+			};
+			let cluster_title = `Cluster of ${count} markers`;
+			let cluster_zIndex = Number(google.maps.Marker.MAX_ZINDEX) + count;
+
+			return new google.maps.Marker({
+				position,
+				icon: cluster_icon,
+				label: cluster_label,
+				title: cluster_title,
+				zIndex: cluster_zIndex,
+			});
+		}
+	}
+
+	new markerClusterer.MarkerClusterer({ map, markers, renderer });
+}

srcs/plugins/map_prof/scripts/mp_info_window.js

@@ -6,8 +6,15 @@ function attach_info_window(map, marker, events, infowindow) {
 	 */
 
 	marker.addListener('click', () => {
+		infowindow.setOptions({
+			disableAutoPan: true,
+			//position: center_position,
+			//pixelOffset: { width: 50, height: 50 },
+			//shouldFocus: false,
+		});
+		infowindow.setPosition(map.getCenter());
 		infowindow.setContent("test");
-		infowindow.open(map, marker);
+		infowindow.open(map);
 	});
 
 }

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -16,10 +16,6 @@ function mp_init_map() {
 	 * - let cluster_size_factor = Number
 	 */
 
-	/*
-	 * SETTINGS
-	 */
-
 	console.log("locations:");
 	console.log(locations);
 
@@ -42,8 +38,6 @@ function mp_init_map() {
 	let map_div = document.getElementById("ljdp_map");
 	let infowindow = new google.maps.InfoWindow();
 
-
-
 	/*
 	 * DRAW MAP
 	 */
@@ -51,46 +45,10 @@ function mp_init_map() {
 	let map = new google.maps.Map(map_div, map_options);
 	let markers = create_markers(map, locations, infowindow);
 
-	/*
+	// add listener to close infowindow at any click on map
-	 * DRAW CLUSTERS
+	map.addListener('click', function() {
-	 */
+		infowindow.close();
+	});
 
-	let renderer = {
+	draw_clusters(map, markers);
-		render({ count, position }, stats) {
-
-			/* CLUSTERS SETTINGS */
-
-			let cluster_icon_size = [
-				icon_size[0] + ( cluster_size_factor * (count - 2) ),
-				icon_size[1] + ( cluster_size_factor * (count - 2) )
-			];
-			let cluster_svg = window.btoa(`
-				<svg xmlns="http://www.w3.org/2000/svg" width="${cluster_icon_size[0]}" height="${cluster_icon_size[1]}">
-					<circle cx="50%" cy="50%" r="37%" stroke="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
-				</svg>
-			`);
-			let cluster_icon = {
-				url: `data:image/svg+xml;base64,${cluster_svg}`,
-				scaledSize: new google.maps.Size(cluster_icon_size[0], cluster_icon_size[1]),
-			};
-			let cluster_label = {
-				text: String(count),
-				color: "#ba197a",
-				fontSize: "12px",
-				fontWeight: "bold",
-			};
-			let cluster_title = `Cluster of ${count} markers`;
-			let cluster_zIndex = Number(google.maps.Marker.MAX_ZINDEX) + count;
-
-			return new google.maps.Marker({
-				position,
-				icon: cluster_icon,
-				label: cluster_label,
-				title: cluster_title,
-				zIndex: cluster_zIndex,
-			});
-		}
-	}
-
-	new markerClusterer.MarkerClusterer({ map, markers, renderer });
 }