pro/2023_WEBSITE_jipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added basic infowindows

Browse Source
This commit is contained in:
lenovo
2022-11-06 10:04:22 +01:00
parent 6fc3c78b71
commit 4845e4ddf8
6 changed files with 85 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
srcs/plugins/map_prof/scripts/mp_errors_map.js
View File

@@ -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);
}

56
srcs/plugins/map_prof/scripts/mp_init_map.js
View File

@@ -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 = {