Ajouter un marqueur à Google Map en un clic


87

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

J'ai regardé autour de moi ces dernières heures et consulté la documentation de l'API Google Maps, et j'apprécierais de l'aide!

Réponses:


169

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

7
pouvons-nous permettre à l'utilisateur d'ajouter une seule fois? et déplacer le marqueur?
Chaibi Alaa

plase donner un exemple de lien
Sopo

43

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

20

Il s'agit en fait d'une fonctionnalité documentée, et peut être trouvée 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);
  }

14

@Chaibi Alaa, pour permettre à l'utilisateur d'ajouter une seule fois et de déplacer le marqueur; Vous pouvez définir le marqueur au premier clic, puis changer simplement 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); 
    } 
}

6

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


0
  1. Déclarez d'abord le marqueur:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. Appelez la méthode pour tracer le marqueur au clic:
this.placeMarker(coordinates, this.map);
  1. Définissez la fonction:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.