Adicionar marcador ao mapa do Google ao clicar


87

Estou surpreendentemente lutando para encontrar um exemplo muito simples de como adicionar um (s) marcador (es) a um mapa do Google quando um usuário clica com o botão esquerdo no mapa.

Eu olhei em volta nas últimas duas horas e consultei a documentação da API do Google Maps e gostaria de receber alguma ajuda!

Respostas:


169

Depois de muito mais pesquisas, consegui encontrar uma solução.

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 tornar o usuário capaz de adicionar apenas uma vez? e mover o marcador?
Chaibi Alaa

por favor, dê um link de amostra
Sopo

43

Em 2017, a solução é:

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

Este é realmente um recurso documentado e pode ser encontrado aqui

// 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 tornar o usuário capaz de adicionar apenas uma vez, e mover o marcador; Você pode definir o marcador no primeiro clique e, em seguida, apenas alterar a posição nos cliques subsequentes.

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

Atualmente, o método para adicionar o ouvinte ao mapa seria

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

E não

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

Referência


0
  1. Primeiro declare o marcador:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. Chame o método para plotar o marcador no clique:
this.placeMarker(coordinates, this.map);
  1. Defina a função:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.