added basic infowindows

README.md

@@ -2,11 +2,12 @@
 # MAP
 
 todo:
-- gather same-places events
 - add info-window
 - add filter options
 - deal with bad address
 - redsign + and - for zoom -> color and thickness
+- how to put the map on other pages
+- how to send plugin to fabien
 
 - [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

srcs/plugins/map_prof/map_prof_hooks.php

@@ -58,6 +58,12 @@ $mp_coordinates_default = (object)["lat" => 46.227638, "lng" => 2.213749]; // fr
 if (isset($mp_settings_coordinates_default))
 	$mp_coordinates_default = $mp_settings_coordinates_default;
 
+$mp_icon_color = "#ba197a";
+$mp_icon_color_back = "#ffffff99";
+if (isset($mp_settings_icon_color))
+	$mp_icon_color = $mp_settings_icon_color;
+if (isset($mp_settings_icon_color_back))
+	$mp_icon_color_back = $mp_settings_icon_color_back;
 
 
 
@@ -87,7 +93,6 @@ function mp_add_div() {
 	$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_script('mp_errors_maps',			plugins_url('scripts/mp_errors_map.js', __FILE__),	'',						'',	true);
 	wp_enqueue_script('mp_marker_clusterer',	$marker_clusterer,									['mp_errors_maps'],		'', 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/mp_add_to_scripts.php

@@ -13,6 +13,7 @@ function mp_php_to_js($php_var, $js_var_name) {
 function mp_add_to_scripts() {
 	global $mp_icon_size;
 	global $mp_icon_color;
+	global $mp_icon_color_back;
 	global $mp_cluster_size_factor;
 	global $mp_coordinates_default;
 	$events = mp_get_published_events();
@@ -22,6 +23,7 @@ function mp_add_to_scripts() {
 	wp_add_inline_script('mp_init_map', mp_php_to_js($locations, 'locations'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_size, 'icon_size'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_color, 'icon_color'), 'before');
+	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_color_back, 'icon_color_back'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_cluster_size_factor, 'cluster_size_factor'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_coordinates_default, 'coordinates_default'), 'before');
 }

srcs/plugins/map_prof/scripts/mp_errors_map.js

@@ -1,7 +0,0 @@
-function print_error(error) {
-	let div_map = document.getElementById("ljdp_map");
-	let p_err = document.createElement('p');
-
-	p_err.textContent = error;
-	div_map.after(p_err);
-}

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -11,6 +11,7 @@ function mp_init_map() {
 	 *						]
 	 * - let coordinates_default = {lat: ,lng: }
 	 * - let icon_color = ""
+	 * - let icon_color_back = ""
 	 * - let icon_size = [x, y]
 	 * - let cluster_size_factor = Number
 	 */
@@ -19,7 +20,6 @@ function mp_init_map() {
 	 * SETTINGS
 	 */
 
-	//print_error("error");
 	console.log("locations:");
 	console.log(locations);
 
@@ -41,8 +41,8 @@ function mp_init_map() {
 	}
 	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="#ba197a" stroke-width="26" fill="#ffffff80" />
+			<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="#ba197a" />
+			<polygon points="35,80 65,80 50,100" fill="${icon_color}" />
 		</svg>
 	`);
 	let icon_options = {
@@ -59,15 +59,61 @@ function mp_init_map() {
 	let map = new google.maps.Map(document.getElementById("ljdp_map"), map_options);
 	let markers = [];
 	for (loc of locations) {
-		marker = new google.maps.Marker({
+		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
 	 */
@@ -83,7 +129,7 @@ function mp_init_map() {
 			];
 			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="#ba197a" stroke-width="6" fill="#ffffff80" />
+					<circle cx="50%" cy="50%" r="37%" stroke="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
 				</svg>
 			`);
 			let cluster_icon = {

srcs/plugins/map_prof/settings/mp_optionnals.php

@@ -8,6 +8,7 @@
  */
 
 
+
 /* ************************************
 	dimensions de l'icone des marqueurs
 	valeur par defaut [40, 40]
@@ -15,12 +16,6 @@
 //$mp_settings_icon_size = [50, 50];
 
 
-/* ************************************
-	couleur des markers
-	valeur par defaut "#ba197a"
-   ************************************ */
-//$mp_settings_icon_color = "#d168a8";
-
 
 /* ************************************
 	facteur de taille des clusters
@@ -29,6 +24,7 @@
 //$mp_settings_cluster_size_factor = 4;
 
 
+
 /* ************************************
 	coordonnees par defaut
 	(pour centrer la carte globale,
@@ -38,4 +34,26 @@
 //$mp_settings_coordinates_default = {lat:35.746512, lng:-39.462891}; // oceant atlantique nord
 
 
+
+/* ************************************
+	couleurs d'icones
+	- couleur de contour
+	- couleur de remplissage
+	valeurs par defaut "#ba197a"
+	                   "#ffffff99"
+   ************************************ */
+//$mp_settings_icon_color = "#d168a8";
+//$mp_settings_icon_color_back = "#ffffff80";	// transparency :
+												// 0.0 : 00
+												// 0.1 : 1a
+												// 0.2 : 33
+												// 0.3 : 4d
+												// 0.4 : 66
+												// 0.5 : 80
+												// 0.6 : 99
+												// 0.7 : b3
+												// 0.8 : cc
+												// 0.9 : e6
+
+
 ?>