added basic infowindows
This commit is contained in:
lenovo
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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" />
|
||||
<polygon points="35,80 65,80 50,100" fill="#ba197a" />
|
||||
<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 = {
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user