web-dev-qa-db-fra.com

API Google maps - ajouter un marqueur par adresse javascript

J'ai une base de données de lieux avec des adresses et je veux ajouter des marqueurs sur google maps.

Il montre seulement le marqueur par défaut, semble que le geocoder.geocode () ne fait rien. Par exemple, j'essaie d'ajouter un marqueur sur "New York City", sans succès.

<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>
javascriptgoogle-mapsgoogle-maps-api-3geocoding
10
Aviv Eyal

La raison pour laquelle vous n'obtenez pas le résultat attendu est qu'il y a un placement incorrect des codes dans l'exemple que vous avez fourni. Vous essayez d'obtenir une nouvelle instance de Google Maps API Geocoder avant que Google Maps ne soit entièrement chargé. Par conséquent, Google Maps API Geocoder ne fonctionnera pas à cause de cela UnCaught ReferenceError: google n'est pas défini . Vous devriez obtenir une nouvelle instance de Google Maps API Geocoder dans la fonction initMap ().

Vous pouvez vérifier Maps JavaScript API Geocoding pour en savoir plus.

Vous pouvez également vérifier Meilleures pratiques lors du géocodage des adresses.

Veuillez également noter que vous ne devez pas inclure votre API_KEY lors de la publication de questions liées à Google Maps APi.

Voici tout le 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>

Démo en direct ici.

J'espère que ça aide!

17
rafon

Il y a eu plusieurs erreurs dans votre code. Normalement, cela devrait sembler OK maintenant:

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);
        }
    });
}

Voici une liste de vos erreurs:

  • Vous devez initialiser votre géocodage lorsque l'API Google Maps est entièrement chargée. Cela signifie que vous devez mettre cette ligne de code: geocoder = new google.maps.Geocoder(); dans initMap ().
  • Lorsque vous initialisez la carte, vous devez vous référer à une variable globale. Dans votre code, vous créez une nouvelle carte de variables dans votre fonction. Mais, vous devez passer par la carte variable globale.
  • Lorsque, vous voulez obtenir la position du résultat du géocodeur, vous devez passer par cette ligne de code: results[0].geometry.location.lat ().

Vous pouvez vous référer à la documentation .

Dites-moi si vous avez des questions.

2
SphynxTech