Google Maps v3 establece un solo punto de marcador en el mapa, haga clic en

Ahora tengo el código de mapa de google que establecerá un solo marcador en un mapa. Lo que quiero es que ese único marcador se mueva a las coordenadas en las que el usuario haga clic. Solo quiero 1 marcador en el mapa, por lo que necesito que ese único marcador se mueva a cualquier ubicación en la que se haga clic. Cualquier ayuda es apreciada. ¡Gracias!Google Maps v3 establece un solo punto de marcador en el mapa, haga clic en

var initialLocation; 
    var siberia = new google.maps.LatLng(60, 105); 
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); 
    var browserSupportFlag = new Boolean(); 



    function initialize() { 
     var myOptions = { 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

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

     // Try W3C Geolocation (Preferred) 
     if(navigator.geolocation) { 
      browserSupportFlag = true; 
      navigator.geolocation.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeolocation(browserSupportFlag); 
      }); 
      // Try Google Gears Geolocation 
     } else if (google.gears) { 
      browserSupportFlag = true; 
      var geo = google.gears.factory.create('beta.geolocation'); 
      geo.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.latitude,position.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeoLocation(browserSupportFlag); 
      }); 
      // Browser doesn't support Geolocation 
     } else { 
      browserSupportFlag = false; 
      handleNoGeolocation(browserSupportFlag); 
     } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag === true) { 
       alert("Geolocation service failed."); 
       initialLocation = newyork; 
      } else { 
       alert("Your browser doesn't support geolocation. We've placed you in Siberia."); 
       initialLocation = siberia; 
      } 
     } 

     function placeMarker(location) { 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
       draggable: true 
      }); 
      map.setCenter(location); 
      var markerPosition = marker.getPosition(); 
      populateInputs(markerPosition); 
      google.maps.event.addListener(marker, "drag", function (mEvent) { 
       populateInputs(mEvent.latLng); 
      }); 
     } 
     function populateInputs(pos) { 
      document.getElementById("t1").value=pos.lat() 
      document.getElementById("t2").value=pos.lng(); 
     } 
    }

Fuente

2010-12-27 user547794

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #map_canvas {height:600px;width:800px} 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
     var map; 
     var markersArray = []; 

     function initMap() 
     { 
      var latlng = new google.maps.LatLng(41, 29); 
      var myOptions = { 
       zoom: 10, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      // add a click event handler to the map object 
      google.maps.event.addListener(map, "click", function(event) 
      { 
       // place a marker 
       placeMarker(event.latLng); 

       // display the lat/lng in your form's lat/lng fields 
       document.getElementById("latFld").value = event.latLng.lat(); 
       document.getElementById("lngFld").value = event.latLng.lng(); 
      }); 
     } 
     function placeMarker(location) { 
      // first remove all markers if there are any 
      deleteOverlays(); 

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

      // add marker in markers array 
      markersArray.push(marker); 

      //map.setCenter(location); 
     } 

     // Deletes all markers in the array by removing references to them 
     function deleteOverlays() { 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setMap(null); 
       } 
      markersArray.length = 0; 
      } 
     } 
    </script> 
</head> 

<body onload="initMap()"> 
    <div id="map_canvas"></div> 
    <input type="text" id="latFld"> 
    <input type="text" id="lngFld"> 
</body> 
</html>

Fuente

2010-12-30 22:17:55

Solo quiere mover un solo marcador, por lo que tiene más sentido el uso de marker.setPosition(). Agregaré una respuesta como un ejemplo de cómo hacerlo de esa manera. – orrd

esta respuesta funciona bien, pero en realidad no se necesita y una matriz para hacer eso, es suficiente una var, ya que es solo un último marcador, porque cuando se establece una nueva, se borra inmediatamente la última. Publiqué el código ... – Samuel

Crea una variable global de javascript "marcador".

Luego, en su oyente añadir el si marcador existe declaración y remove que si es cierto

myListener = google.maps.event.addListener(map, 'click', function(event) { 
      if(marker){marker.setMap(null)} 
      placeMarker(event.latLng); 
      google.maps.event.removeListener(myListener); 
     });

Fuente

2010-12-27 08:17:15

Gracias por su respuesta. No puedo obtener el { if (marcador) {marcador.setMap (nulo)} código para trabajar. Si elimino esta línea, se crea un solo marcador y puedo moverlo a cualquier lugar. Sin embargo, cuando se hace clic en una nueva ubicación, el marcador no se mueve allí. – user547794

Usted puede tratar de:

google.maps.event.addListener(map, 'click', function(event){ 
     var marker_position = event.latLng; 
marker = new google.maps.Marker({ 
       map: map, 
       draggable: false 
      }); 
     marker.setPosition(marker_position); 
})

Fuente

2012-08-15 04:01:13 cowboybkit

probar esto

if (marker) { marker.setMap(null) } 

marker = new google.maps.Marker({ position: event.latLng, map: map });

Fuente

2012-10-30 10:31:39 MAK

Las respuestas actuales hacen mucho más trabajo del necesario al eliminar y volver a agregar el/los marcador (es). La mejor forma de hacerlo es utilizar la función setPosition() que proporciona la API de Google Maps para este fin.

Aquí está el código modificado para utilizar setPosition() para mover el puntero:

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #map_canvas { height:600px; width:800px } 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    var initialLocation; 
    var siberia = new google.maps.LatLng(60, 105); 
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); 
    var browserSupportFlag = new Boolean(); 

    function initialize() { 
     var myOptions = { 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var marker; 

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

     // Try W3C Geolocation (Preferred) 
     if(navigator.geolocation) { 
      browserSupportFlag = true; 
      navigator.geolocation.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeolocation(browserSupportFlag); 
      }); 
      // Try Google Gears Geolocation 
     } else if (google.gears) { 
      browserSupportFlag = true; 
      var geo = google.gears.factory.create('beta.geolocation'); 
      geo.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.latitude,position.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeoLocation(browserSupportFlag); 
      }); 
      // Browser doesn't support Geolocation 
     } else { 
      browserSupportFlag = false; 
      handleNoGeolocation(browserSupportFlag); 
     } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag === true) { 
       alert("Geolocation service failed."); 
       initialLocation = newyork; 
      } else { 
       alert("Your browser doesn't support geolocation. We've placed you in Siberia."); 
       initialLocation = siberia; 
      } 
     } 

     function placeMarker(location) { 
      if (marker) { 
       marker.setPosition(location); 
      } else { 
       marker = new google.maps.Marker({ 
        position: location, 
        map: map, 
        draggable: true 
       }); 
       google.maps.event.addListener(marker, "drag", function (mEvent) { 
        populateInputs(mEvent.latLng); 
       }); 
      } 
      populateInputs(location); 
     } 

     function populateInputs(pos) { 
      document.getElementById("t1").value=pos.lat() 
      document.getElementById("t2").value=pos.lng(); 
     } 
    } 

    </script> 
</head> 

<body onload="initialize()"> 
    <div id="map_canvas"></div> 
    <input type="text" id="t1"> 
    <input type="text" id="t2"> 
</body> 
</html>

Fuente

2013-08-09 19:48:56 orrd

Después de hacer clic y arrastrar el mapa, el evento mouseup falla en él. El icono de la mano sigue agarrando y arrastrando el mapa incluso después de soltar el botón del mouse. Consola que dice 'No se puede leer la propiedad 'latLng' de undefined.' Aquí se muestra el error 'google.maps.event.addListener (map, 'drag', function (event) { placeMarker (event.latLng); });' – sohaiby

Burak Erdem respuesta funciona bien, pero en realidad usted no necesita y la matriz de hacerlo, es suficiente una var ya que es solo un último marcador, porque cuando configura uno nuevo, elimina inmediatamente el último. Lo hice con estas pocas líneas y funcionó bien:

 var map; 
     var lastMarker; 
     function initialize() { 
      var map_canvas = document.getElementById('map_canvas'); 
      var map_options = { 
       center: new google.maps.LatLng(-25.363882, 131.044922), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(map_canvas, map_options) 
      google.maps.event.addListener(map, 'click', function(event) { 
       placeMarker(event.latLng); 
      }); 
     } 

     function placeMarker(location) { 
      if (lastMarker != null) 
       lastMarker.setMap(null); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map 
      }); 
      lastMarker = marker; 
     } 

     google.maps.event.addDomListener(window, 'load', initialize);

Fuente

2014-06-12 14:31:17 Samuel

lo logré con lo siguiente:

// create a new marker 
var marker = new google.maps.Marker({ 
}); 
//add listener to set the marker to the position on the map 
google.maps.event.addListener(map, 'click', function(event) { 
marker.setPosition(event.latLng); 
marker.setMap(map); 
marker.setAnimation(google.maps.Animation.DROP); 
});

Se crea un marcador y luego moverlo a cada clic del ratón ... ubicación También agregué una animación de marcador de caída también.

En lugar de crear marcadores múltiples, esto crea un marcador y lo mueve a la ubicación en la que se hizo clic.

Fuente

2015-01-31 14:28:11 MrGoodfellow

Google Maps v3 establece un solo punto de marcador en el mapa, haga clic en

Respuesta

Cuestiones relacionadas