Google Maps API - Marker nach Adresse hinzufügen Javascript

Ich habe Datenbank von Orten mit Adressen und ich möchte Marker auf Google Maps hinzufügen.Google Maps API - Marker nach Adresse hinzufügen Javascript

Es zeigt nur die Standard-Marker, scheint wie der geocoder.geocode() tut nichts. Für ein 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>

Quelle

2017-10-21 Aviv Eyal

Der Grund, warum Sie nicht das erwartete Ergebnis erhalten, liegt in der falschen Code-Platzierung in dem von Ihnen bereitgestellten Beispiel. Sie versuchen, eine neue Instanz von Google Maps API Geocoder zu erhalten, bevor Google Maps vollständig geladen ist. Daher funktioniert Google Maps API Geocoder nicht wegen dieser Uncaught ReferenceError: Google ist nicht definiert. Sie sollten eine neue Instanz von Google Maps API Geocoder innerhalb der initMap() - Funktion erhalten.

Sie können Maps JavaScript API Geocoding überprüfen, um mehr zu erfahren. Sie können auch Best Practices When Geocoding Addresses überprüfen.

Bitte beachten Sie auch, dass Sie Ihren API_KEY nicht bei der Buchung von Fragen zu Google Maps APi einbeziehen sollten.

Hier ist der gesamte 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 here.

Hoffe es hilft!

Quelle

2017-10-24 08:56:09 rafon

Großartig - würde es Ihnen etwas ausmachen, meine Antwort zu akzeptieren/upvoting? Danke – rafon

Natürlich habe ich bereits abgestimmt, aber es wird nur stattfinden, wenn ich mehr Reputationspunkte haben werde. –

Ich habe gerade deine Frage aufgefrischt - es ist seltsam, weil ich dachte, du bist schon> 15 Wiederholungen :). akzeptiert es braucht keine höhere rep :) – rafon

Es gab mehrere Fehler in Ihrem Code. Normalerweise sollte, sieht es jetzt OK:

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 haben Ihre geocode zu initialisieren, wenn die Google Maps API vollständig geladen ist. Es bedeutet, dass Sie diese Codezeile setzen 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 in Ihrer Funktion eine neue Variablenzuordnung. Aber Sie müssen an der globalen Variablenkarte vorbeifahren. Wenn Sie die Position des Geocoders erhalten möchten, müssen Sie diese Codezeile passieren: results[0].geometry.location.lat().

Sie können sich auf die documentation beziehen.

Sagen Sie mir, wenn Sie ein paar Fragen haben.

Quelle

2017-10-22 11:30:45

Google Maps API - Marker nach Adresse hinzufügen Javascript

Antwort

Verwandte Themen