diff --git a/srcs/plugins/map_prof/map_prof_hooks.php b/srcs/plugins/map_prof/map_prof_hooks.php
index f94c95a..18b6dfd 100644
--- a/srcs/plugins/map_prof/map_prof_hooks.php
+++ b/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_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);
+ 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_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();
diff --git a/srcs/plugins/map_prof/scripts/mp_create_markers.js b/srcs/plugins/map_prof/scripts/mp_create_markers.js
new file mode 100644
index 0000000..d4e23f0
--- /dev/null
+++ b/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(`
+
+ `);
+ 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;
+}
diff --git a/srcs/plugins/map_prof/scripts/mp_info_window.js b/srcs/plugins/map_prof/scripts/mp_info_window.js
new file mode 100644
index 0000000..e6972fb
--- /dev/null
+++ b/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);
+ });
+
+}
diff --git a/srcs/plugins/map_prof/scripts/mp_init_map.js b/srcs/plugins/map_prof/scripts/mp_init_map.js
index 3cc92a5..92d1e3e 100644
--- a/srcs/plugins/map_prof/scripts/mp_init_map.js
+++ b/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 icon_options = {
- url: `data:image/svg+xml;base64,${svg_icon}`,
- scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
- };
+ let map_div = document.getElementById("ljdp_map");
+ let infowindow = new google.maps.InfoWindow();
@@ -56,63 +48,8 @@ function mp_init_map() {
* DRAW MAP
*/
- let map = new google.maps.Map(document.getElementById("ljdp_map"), map_options);
- let markers = [];
- 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,
-// });
-// });
+ let map = new google.maps.Map(map_div, map_options);
+ let markers = create_markers(map, locations, infowindow);
/*
* DRAW CLUSTERS