0

Google Maps-JavaScript-API

Hallo zusammen,

ich möchte gerne in Zukunft ein paar Markt-Standorte in einer in Ninox eingebetteten Google Karte mit Pin-Nadeln anzeigen lassen.

Mit der Google Maps Embed-API hat das bei einem Standort schonmal geklappt.

Wenn ich nun mehrere Standorte auf der Karte haben will muss ich wohl die Maps-JavaScript-API verwenden. Dazu habe ich schon einiges an Dokus gelesen und auch im Ninox API-Team eine DB „Google Maps POI“ gefunden die meine Anforderung eigentlich darstellt.

Warum gibt mir dann bspw. der unten angegebene Code keine Karte aus, wenn ich ihn in einem Berechnungsfeld ausführe??

let myAPIkey := first((select 'Weitere Einstellungen')['Parameter (admin)' = "Maps_APIkey1"]).Wert;
html("<iframe
<div id=""map""></div> <style>#map { height: 100%; }</style><script>function initMap() {var myCenter = {lat: 52.525145, lng: 13.3672179}; var map = new google.maps.Map(document.getElementById(""map""),{zoom: 4,center: myCenter});}</script> <script async defer src=""https://maps.googleapis.com/maps/api/js?key=" +
myAPIkey +
"&callback=initMap""></script>></iframe>")

Danke vorab für eure Hilfe :-)

7 Antworten

null
    • Benjamin_Kunzmann_pr
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Oder anders gefragt, lässt sich JavaScript nicht in Ninox ausführen?

    • m2apla gmbh
    • Etienne_Scherrer
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Hallo Benjamin

    Die Google Karte mit mehreren Pins ist auch ein Thema welches uns längere Zeit beschäftigt hat. So wie di es im Moment ausführst denke ich nicht, dass es funktionieren kann. Wenn du die Google Maps API über Javascript einbindest kannst du das ganze nicht auch noch in eine iframe packen. Ich mache auch gerade noch ein paar Tests wie das funktionieren kann und melde mich nochmals wenn ich etwas gefunden habe.

    Aber grundsätzlich kann man JavaScript problemlos in Ninox ausführen.

    Gruss Etienne

    • m2apla gmbh
    • Etienne_Scherrer
    • vor 1 Jahr
    • Gemeldet - anzeigen
    let myAPIkey := "[API-KEY]";
    html("
    <div id='map' style='height: 100%;'></div>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8,
              });
            var marker1 = new google.maps.Marker({
                position: { lat: -34.397, lng: 150.644 },
                map: map,
              });
            var marker2 = new google.maps.Marker({
                position: { lat: -34.697, lng: 150.344 },
                map: map,
              });
        };
        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>
    ")
    

    So funktioniert das ganze bei mir

      • Benjamin_Kunzmann_pr
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Etienne Scherrer wow ich bin beeindruckt! Danke!

      Wie bekommst du deine Standortvariablen in den HTML Code?

      Die Angaben für „Center“ konnte ich als Variable einfügen.

      Die Angaben für die verschiedenen Standorte hat auf Anhieb nicht geklappt..

      Ich habe es mit der join Funktion versucht, und das Ergebnis dann in deinen Code integriert:

      let myMarkerNr := 0;
      let myOrte := join(for i in select Verkaufschancen do
              myMarkerNr := myMarkerNr + 1;
              i.("var marker" + myMarkerNr +
              " = new google.maps.Marker({
                  position: { lat: " +
              lat +
              ", lng: " +
              lon +
              " },
                  map: map,
                });")
          end, "
      ");
      

      Hast du eine andere Idee?

      • m2apla gmbh
      • Etienne_Scherrer
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Benjamin Kunzmann (pr) 

      Hallo Benjamin

      Du kannst die Standorte aus deiner Tabelle direkt als JSON holen:

      select Verkaufschancen).{key: ValueAusTabelle}
      

      Und diese direkt in eine JavasScript variable speichern und anschliessen mit variable.forEach() über diese Standorte iterieren und die Funktion addMarker() aufrufen.

      html("
      <div id='map' style='height: 100%;'></div>
      <script>
          var locations = " + formatJSON((select Verkaufschancen).{
          position: {
              lat: lat,
              lng: lng
          },
          title: Name
      }) + ";
          var map;
          var icon = 'https://maps.google.com/mapfiles/ms/micons/yellow-dot.png';
          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: locations[0].position,
                  zoom: 10,
                });
              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>
      ")
      

      In diesem Fall nehme ich an, dass du die Koordinaten von allen Orten kennst, welche du auf der Karte anzeigen möchtest. Ansonsten gäbe es auch die Möglichkeit über die Google Geocoder API die Koordinaten von unbekannten Orten abzurufen.

      Ich hoffe das hilft dir mal weiter so.

      • Benjamin_Kunzmann_pr
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Etienne Scherrer jetzt bin ich noch mehr beeindruckt :-)

      Jep, genau ich habe in der Tabelle Verkaufschancen die Google Geocode API eingebaut, die nach Eingabe der Adresse auch die Geokoordinaten in zwei Textfelder schreibt.

      Ich muss zugeben dass mein JavaScript Wissensstand noch lernen muss.. :-)

      Hast du den Code bei dir getestet`?
      Bei mir liefert er leider kein Ergebnis.
      Die Zeile 

      center: locations[0].position,

      hab ich testweise ersetzt mit

      center: { lat: -34.397, lng: 150.644 }

      Dann kam die Karte wieder zurück, allerdings ohne Markers..

      • m2apla gmbh
      • Etienne_Scherrer
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Benjamin Kunzmann (pr) Ja habe da das bei mir getestet und es läuft. Ist es möglich, dass bei dir die Felder in der Tabelle "Verkaufschancen" nicht "lat" und "lng" heissen. Oder was gibt dir die Browserkonsole sonst für Fehler zurück?

Content aside

  • vor 1 JahrZuletzt aktiv
  • 7Antworten
  • 158Ansichten
  • 3 Folge bereits