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