webentwicklung-frage-antwort-db.com.de

Google Maps API - Markierung nach Adresse hinzufügen Javascript

Ich habe eine Ortsdatenbank mit Adressen und möchte Markierungen auf Google Maps hinzufügen.

Es wird nur der Standardmarker angezeigt, wie es scheint, tut geocoder.geocode () nichts. Zum Beispiel versuche ich, einen Marker auf "New York City" hinzuzufügen, ohne Erfolg.

<script>
    var geocoder;
    var map;
    var address = "new york city";
    geocoder = new google.maps.Geocoder();
    function initMap() {
        var uluru = { lat: -25.363, lng: 131.044 };
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
        codeAddress(address);

    }

    function codeAddress(address) {

        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == 'OK') {
                    var marker = new google.maps.Marker({
                    position: address,
                    map: map
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap"
    async defer></script>
10
Aviv Eyal

Der Grund, warum Sie nicht das erwartete Ergebnis erhalten, ist, dass in dem von Ihnen bereitgestellten Beispiel eine falsche Code-Platzierung vorliegt. Sie versuchen, eine neue Instanz von Google Maps API Geocoder abzurufen, bevor Google Maps vollständig geladen ist. Daher funktioniert Google Maps API Geocoder aus diesem Grund nicht. Nicht erfasster ReferenceError: Google ist nicht definiert . Sie sollten eine neue Instanz von Google Maps API Geocoder in der Funktion initMap () erhalten.

Sie können Maps JavaScript API Geocoding überprüfen, um weitere Informationen zu erhalten.

Sie können auch Best Practices beim Geokodieren von Adressen überprüfen.

Beachten Sie auch, dass Sie Ihr API_KEY nicht angeben sollten, wenn Sie Fragen zu Google Maps APi stellen.

Hier ist der ganze Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var geocoder;
      var map;
      var address = "new york city";
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        });
        geocoder = new google.maps.Geocoder();
        codeAddress(geocoder, map);
      }

      function codeAddress(geocoder, map) {
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Live-Demo hier.

Ich hoffe es hilft!

17
rafon

In Ihrem Code sind mehrere Fehler aufgetreten. Normalerweise sollte es jetzt OK aussehen:

var geocoder;
var map;
var address = "new york city";

function initMap() {
    geocoder = new google.maps.Geocoder();

    var uluru = { lat: -25.363, lng: 131.044 };
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
    codeAddress(address);

}

function codeAddress(address) {

    geocoder.geocode({ 'address': address }, function (results, status) {
        console.log(results);
        var latLng = {lat: results[0].geometry.location.lat (), lng: results[0].geometry.location.lng ()};
        console.log (latLng);
        if (status == 'OK') {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
            console.log (map);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

Dies ist eine Liste Ihrer Fehler:

  • Sie müssen Ihren Geocode initialisieren, wenn die Google Maps API vollständig geladen ist. Dies bedeutet, dass Sie die folgende Codezeile einfügen müssen: geocoder = new google.maps.Geocoder(); in initMap ().
  • Wenn Sie die Map initialisieren, müssen Sie auf eine globale Variable verweisen. In Ihrem Code erstellen Sie eine neue Variablenzuordnung in Ihrer Funktion. Sie müssen jedoch die variable Karte des Globals passieren.
  • Wenn Sie die Position des Geocoder-Ergebnisses ermitteln möchten, müssen Sie die folgende Codezeile verwenden: results[0].geometry.location.lat ().

Sie können auf die Dokumentation verweisen .

Sagen Sie mir, wenn Sie Fragen haben.

2
SphynxTech