GoogleMaps v3 API Crear solo 1 marcador al hacer clic

Question

Estoy creando correctamente un marcador al hacer clic sin embargo, usando el siguiente código, obtengo un nuevo marcador con cada clic, solo quiero agregar un marcador y si alguien hace clic más de una vez me gustaría que se mueva el marcador existente a la nueva posición alguien puede ayudar aquí está el código

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

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

Answer 1

var marker; 

function placeMarker(location) { 
    if (marker) { 
    marker.setPosition(location); 
    } else { 
    marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
    } 
} 

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

hay que trabajar sobre el mismo marcador todo el tiempo - no para crear otros nuevos. Aquí tiene una variable global y en la función placeMarker asigna marcador a esta variable por primera vez. La próxima vez verifica que el marcador ya existe y luego simplemente cambia su posición.

Answer 2

uso addListenerOnce, en lugar de addListener

Answer 3

Usted puede tratar de hacer directamente en su oyente:

google.maps.event.addListener(Map, 'click', function(event){ 
    marker.setMap(null);  
    marker = new google.maps.Marker({ 
     map:  Map, 
     position: event.latLng 
    });  
}); 

Answer 4

Hola yo nos topamos con el mismo problema y se me ocurrió esta respuesta antes de encontrar este post . Así que aquí está la respuesta:

añadir el eventListener dentro de la función de mapa initialize:

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

continuación, crear una variable de contador y lo utilizan en addListing variable (mi función para añadir el marcador):

var i=0 
function addListing(location) { 
    var addMarker; 
    var iMax=1; 

    if(i<=iMax) { 
     addMarker = new google.maps.Marker({ 
     draggable:false, 
     position: location, 
     map: map 
    }); 

    google.maps.event.addListener(addMarker, 'dblclick', function() { 
    addMarker.setMap(null); 
    i=1; 
    }); 

    i++; 

    } else { 
     console.log('you can only post' , i-1, 'markers'); 
     } 
} 

El otro beneficio de este enfoque (creo) es que puede controlar la cantidad de marcadores que el usuario puede colocar en el mapa fácilmente aumentando o disminuyendo el valor máximo del contador (es decir, iMax = 2 aumentará la cantidad permitida kers a 2). Borre el marcador haciendo doble clic en él y puede volver a ubicarlo en otra ubicación.

Espero que ayude a alguien en el futuro.
Saludos

Answer 5

<div id="map" style="width:100%;height:500px;"></div> 

<script> 

    var marker; 
    var infowindow; 

    function myMap() { 
     var mapCanvas = document.getElementById("map"); 
     var myCenter=new google.maps.LatLng(51.508742,-0.120850); 
     var mapOptions = { 
      center: myCenter, zoom: 18, 
      mapTypeId:google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
     google.maps.event.addListener(map, 'click', function(event) { 
      placeMarker(map, event.latLng); 
     }); 
    } 

    function placeMarker(map, location) { 
     if (!marker || !marker.setPosition) { 
      marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
      }); 
     } else { 
      marker.setPosition(location); 
     } 
     if (!!infowindow && !!infowindow.close) { 
      infowindow.close(); 
     } 
     infowindow = new google.maps.InfoWindow({ 
      content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() 
     }); 
     infowindow.open(map,marker); 
    } 


</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkG1aDqrbOk28PmyKjejDwWZhwEeLVJbA&callback=myMap"></script> 

Esto funciona bien jsFiddle http://jsfiddle.net/incals/o7jwuz12

y esto por código completo: https://github.com/Lavkushwaha/Google_Maps_API_Without_PHP_DOM/blob/master/single.html