separate js functions in multiple files

srcs/plugins/map_prof/map_prof_hooks.php

@@ -92,10 +92,12 @@ function mp_add_div() {
 	// https://developers.google.com/maps/documentation/javascript/marker-clustering
 	$marker_clusterer = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js";
 
-	wp_enqueue_style( 'mp_style',				plugins_url('styles/mp_style.css', __FILE__),		'',						'',	'');
+	wp_enqueue_style( 'mp_style',				plugins_url('styles/mp_style.css', __FILE__),			'',						'',	false);
-	wp_enqueue_script('mp_marker_clusterer',	$marker_clusterer,									['mp_errors_maps'],		'', true);
+	wp_enqueue_script('mp_info_window',			plugins_url('scripts/mp_info_window.js', __FILE__),		'',						'',	false);
-	wp_enqueue_script('mp_init_map',			plugins_url('scripts/mp_init_map.js', __FILE__),	['mp_marker_clusterer'],'',	true);
+	wp_enqueue_script('mp_create_markers',		plugins_url('scripts/mp_create_markers.js', __FILE__),	'',						'',	false);
-	wp_enqueue_script('mp_google_api',			mp_url_api(),										['mp_init_map'],		'',	true);
+	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);
 
 	mp_add_to_scripts();
 

srcs/plugins/map_prof/scripts/mp_create_markers.js

@@ -0,0 +1,35 @@
+function create_markers(map, locations, infowindow) {
+
+	/*
+	 * following variable are created by mp_add_to_script.php
+	 * - let icon_color = ""
+	 * - let icon_color_back = ""
+	 * - let icon_size = [x, y]
+	 */
+
+	let svg_icon = window.btoa(`
+		<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+			<circle cx="50%" cy="50%" r="27%" stroke="${icon_color}" stroke-width="26" fill="${icon_color_back}" />
+			<polygon points="35,80 65,80 50,100" fill="${icon_color}" />
+		</svg>
+	`);
+	let icon_options = {
+		url: `data:image/svg+xml;base64,${svg_icon}`,
+		scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
+	};
+
+	let markers = [];
+	for (loc of locations) {
+		let marker = new google.maps.Marker({
+			position: loc.coordinates,
+			map: map,
+			icon: icon_options,
+		});
+
+		attach_info_window(map, marker, loc.events, infowindow);
+
+		markers.push(marker);
+	};
+
+	return markers;
+}

srcs/plugins/map_prof/scripts/mp_info_window.js

@@ -0,0 +1,13 @@
+function attach_info_window(map, marker, events, infowindow) {
+
+	/*
+	 * https://developers.google.com/maps/documentation/javascript/infowindows
+	 * https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
+	 */
+
+	marker.addListener('click', () => {
+		infowindow.setContent("test");
+		infowindow.open(map, marker);
+	});
+
+}

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -39,16 +39,8 @@ function mp_init_map() {
 		//draggable: "true",				//deprecated
 		center: map_center,
 	}
-	let svg_icon = window.btoa(`
+	let map_div = document.getElementById("ljdp_map");
-		<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+	let infowindow = new google.maps.InfoWindow();
-			<circle cx="50%" cy="50%" r="27%" stroke="${icon_color}" stroke-width="26" fill="${icon_color_back}" />
-			<polygon points="35,80 65,80 50,100" fill="${icon_color}" />
-		</svg>
-	`);
-	let icon_options = {
-		url: `data:image/svg+xml;base64,${svg_icon}`,
-		scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
-	};
 
 
 
@@ -56,63 +48,8 @@ function mp_init_map() {
 	 * DRAW MAP
 	 */
 
-	let map = new google.maps.Map(document.getElementById("ljdp_map"), map_options);
+	let map = new google.maps.Map(map_div, map_options);
-	let markers = [];
+	let markers = create_markers(map, locations, infowindow);
-	for (loc of locations) {
-		let marker = new google.maps.Marker({
-			position: loc.coordinates,
-			map: map,
-			icon: icon_options,
-		});
-		//marker.content = loc.events;
-		//attach_info_window(map, marker, marker.content);
-
-		let infowindow = new google.maps.InfoWindow({
-			content: loc.events[0].title,
-		});
-
-		marker.addListener('click', () => {
-			infowindow.open(map, marker);
-		});
-
-		markers.push(marker);
-	};
-
-
-
-	/*
-	 * INFO WINDOW
-	 *
-	 * https://developers.google.com/maps/documentation/javascript/infowindows
-	 * https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
-	 */
-
-//	let infowindow = new google.maps.InfoWindow();
-//
-//	google.maps.event.addListener(marker, 'click', function(map, marker){
-//		//map.infowindow.setContent(marker.content[0].title);
-//		map.infowindow.setContent("test");
-//		map.infowindow.open(map, marker);
-//	});
-
-//	google.maps.event.addListener(marker, 'click', (function(marker) {
-//		return function() {
-//			//infowindow.setContent(marker.content[0].title);
-//			infowindow.setContent("test");
-//			infowindow.open(map, marker);
-//		}
-//	})(marker));
-
-//	let infowindow = new google.maps.InfoWindow({
-//		content: "test",
-//	});
-//
-//	marker.addListener("click", () => {
-//		infowindow.open({
-//			anchor: marker,
-//			map,
-//		});
-//	});
 
 	/*
 	 * DRAW CLUSTERS