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

null
    • szormpas
    • 3 wk ago
    • Reported - view

     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.

      • Christoph_Hintermuller
      • 3 wk ago
      • Reported - view

       Thanks a lot. That was extremley helpful. 

      I combinded booth scripts and now it is working! For those who are interessted, this is the final script

       

      let myAPIkey := "XXXXX";
      
      html("
      <link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
          integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
          crossorigin=''/>
      
      <script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
          integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
          crossorigin=''></script>
      
      <div id='map' style='height: 100%; width: 100%;'></div>
      
      <script>
          var locations = " +
          formatJSON((select Locations).{
              position: {
                  lat: lat,
                  lng: lon
              },
              title: Location,
              recordId: Id
          }) +
          ";
      
          setTimeout(function(){
              // Karte initialisieren
              var map = L.map('map').setView([51.1657, 10.4515], 7); // Zentrum: Deutschland
      
              // Google Maps Tile Layer einbinden
              L.tileLayer('https://maps.googleapis.com/maps/vt?lyrs=m&x={x}&y={y}&z={z}&key=" +
              myAPIkey +
              "', {
                  maxZoom: 20,
                  attribution: 'Map data © Google'
              }).addTo(map);
      
              // Marker hinzufügen
              var googlePin = L.icon({
                  iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // Google Maps Marker
                  iconSize: [32, 32], // Standardgröße ähnlich Google Maps
                  iconAnchor: [16, 32] // Spitze des Icons auf dem Punkt
              });
      
              locations.forEach(function(location) {
                  var marker = L.marker([location.position.lat, location.position.lng], { icon: googlePin })
                      .addTo(map)
                      .bindTooltip('<b>' + location.title + '</b>');
      
                  // Klick-Event für Ninox-Popup hinzufügen
                  marker.on('click', function() {
                      ui.popupRecord(location.recordId);
                  });
              });
          }, 1000);
      </script>
      ")
      
      
      • szormpas
      • 3 wk ago
      • Reported - view

       Hi, glad to see it worked for you too!

      It looks like the Leaflet library also works very well with Google Map Tiles.

      Thanks for sharing your code.

Content aside

  • 3 wk agoLast active
  • 3Replies
  • 71Views
  • 2 Following