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