Ajouter un marqueur à Google Map en cliquant

Question

J'ai du mal à trouver un exemple très simple de la façon d'ajouter un ou plusieurs marqueurs à une carte Google Map lorsqu'un utilisateur fait un clic gauche sur la carte.

J'ai cherché pendant les deux dernières heures, et consulté la documentation de l'API Google Maps, et j'apprécierais un peu d'aide !

Answer 1

Après de nombreuses 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
    });
}

Answer 2

En 2017, la solution est :

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

Answer 3

Il s'agit en fait d'une fonctionnalité documentée, qui se trouve à l'adresse suivante aquí

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

Answer 4

@Chaibi Alaa, Pour que l'utilisateur ne puisse ajouter qu'une seule fois et déplacer le marqueur, vous pouvez définir le marqueur lors du premier clic, puis modifier 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); 
    } 
}

Answer 5

Actuellement, la méthode pour ajouter l'écouteur à la carte est la suivante

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