0
Google Maps
Hi everyone,
I need your help. I have managed to integrate a Google Maps into Ninox that reads coordinates from a table and displays them as markers on the map. Specifically, it is about event locations in Germany.
When I click on the marker, the name of the location is displayed. Is there a possibility that the location name is stored with a link and takes me directly to the entry from which the data of the coordinates come? Do you have any ideas?
Thanks for your input :)
The code:
html("
<div id='map' style='height: 100%;'></div>
<script>
var locations = " +
formatJSON((select Locations).{
position: {
lat: lat,
lng: lon
},
title: Location
}) +
";
var map;
var icon = {
url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // Roter Marker
scaledSize: new google.maps.Size(50, 50) // Größe anpassen (50x50 Pixel)
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
title: feature.title,
icon: icon,
map: map,
});
var infoWindow = new google.maps.InfoWindow({
content: feature.contentString,
})
marker.addListener('click', () => {
infoWindow.open({
anchor: marker,
map: map,
});
});
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 51.1657, lng: 10.4515 }, // Zentrum auf Deutschland
zoom: 7, // Zoom-Level, um ganz Deutschland zu zeigen
});
locations.forEach(function(location) {
addMarker({
position: location.position,
title: location.title,
contentString: '<div>'+location.title+'</div>',
});
});
};
var mapsLink = 'https://maps.googleapis.com/maps/api/js?key=" +
myAPIkey +
"&callback=initMap';
if ($('script[src=""'+mapsLink+'""]').length === 0) {
let script = document.createElement('script');
script.src = mapsLink;
script.async = true;
script.defer = true;
document.body.append(script);
} else {
initMap()
}
</script>
")
Copy
3 replies
-
Hi,
said:
Is there a possibility that the location name is stored with a link and takes me directly to the entry from which the data of the coordinates come?Yes, there is. Have a look at how I've done something similar using the Leaflet library instead of Google Maps in the Dashboard Template project.
Content aside
- 3 wk agoLast active
- 3Replies
- 71Views
-
2
Following