web-dev-qa-db-fra.com

Ajouter un marqueur sur Google Map au clic

J'ai du mal à trouver un exemple très simple expliquant comment ajouter un ou plusieurs marqueurs à une carte Google Map lorsqu'un utilisateur clique sur la carte.

Au cours des dernières heures, j’ai regardé autour de moi et consulté la documentation de l’API de Google Maps. Je vous serais reconnaissant de votre aide!

google-mapsgoogle-maps-api-3
80
Andre R.

Après beaucoup de recherches, j'ai réussi à trouver une solution.

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}
159
Andre R.

En 2017, la solution est la suivante:

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    var marker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.panTo(position);
}
37
David Corral

Ceci est en fait une fonctionnalité documentée, et peut être trouvé ici

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });

  function placeMarker(position, map) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });  
    map.panTo(position);
  }
20
epson121

@Chaibi Alaa, vous pouvez définir le marqueur au premier clic, puis simplement changer la position lors des clics suivants.

var marker;

google.maps.event.addListener(map, 'click', function(event) {

   placeMarker(event.latLng);

});

function placeMarker(location) {

 if (marker == null)
 {
   marker = new google.maps.Marker({
      position: location,
      map: map
  }); } else {   marker.setPosition(location); } }
8
Ahmed Samy

Actuellement, la méthode pour ajouter l'auditeur à la carte serait

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

Et pas

google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
});

référence

6
JamesWorth