Agregue marcador al mapa de Google al hacer clic


87

Sorprendentemente, estoy luchando por encontrar un ejemplo muy simple de cómo agregar un marcador (s) a un mapa de Google cuando un usuario hace clic izquierdo en el mapa.

He mirado alrededor durante las últimas horas y he consultado la documentación de la API de Google Maps, ¡y agradecería ayuda!

Respuestas:


169

Después de mucha más investigación, logré encontrar una solución.

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
¿Podemos hacer que el usuario pueda agregar solo una vez? y mover el marcador?
Chaibi Alaa

Plase dar enlace de muestra
Sopo

43

En 2017, la solución es:

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

Esta es en realidad una característica documentada y se puede encontrar 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);
  }

14

@Chaibi Alaa, Para que el usuario pueda agregar solo una vez y mover el marcador; Puede establecer el marcador en el primer clic y luego cambiar la posición en los siguientes clics.

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

Actualmente, el método para agregar el oyente al mapa sería

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

Y no

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

Referencia


0
  1. Primero declare el marcador:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. Llame al método para trazar el marcador al hacer clic:
this.placeMarker(coordinates, this.map);
  1. Defina la función:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.