Marcador de actualización de Google Maps api V3

2 minutos de lectura

Tengo un mapa que carga. Quiero agregar un marcador que obtenga su latitud y longitud de los cuadros de texto, y no puedo comprenderlo.

No pasa nada cuando hago clic en el botón actualizar mapa.

Aquí está mi código hasta ahora:

$(document).ready(function () {
    alert("Dom, dom dom dom dom");


var map;
var marker;

function initialize() {
    var myLatlng = new google.maps.LatLng(40.65, -74);
    var myOptions = {
        zoom: 2,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}



$("#updateMap").click(function(){


    var newLatLng = new google.maps.LatLng(lat, lng);
    marker.setPosition(newLatLng);

    var lat = parseFloat(document.getElementById('markerLat').value);
    var lng = parseFloat(document.getElementById('markerLng').value);
    var newLatLng = new google.maps.LatLng(lat, lng);


    marker = new google.maps.Marker({
        position: newLatLng,
        map: map,
        draggable: true
    });


});


});



// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

});

Marcador de actualizacion de Google Maps api V3
no.bueno.en.codificación

Actualizar

Además, su global map la referencia nunca se establece en la instancia de mapa real ya que la sombrea con un local var mismo nombre.

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

Esto debería ser solo

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

estas usando lat y lng para la posición del marcador antes de que se inicialicen (a menos que estén configurados globalmente en algún lugar):

var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng);

Si desea actualizar la posición del mismo marcador y no crear uno nuevo, simplemente debe hacer esto:

$("#updateMap").click(function(){
    var lat = parseFloat(document.getElementById('markerLat').value);
    var lng = parseFloat(document.getElementById('markerLng').value);
    var newLatLng = new google.maps.LatLng(lat, lng);
    marker.setPosition(newLatLng);
});

1641756603 966 Marcador de actualizacion de Google Maps api V3
yuri stuken

Primero en initialize función que está creando nueva local map variable, porque usas var palabra clave. Esta variable no es visible fuera initialize, por lo que debe eliminar var para usar la variable global.

En segundo lugar, estás usando lat y lng variables antes de que sean definidas.

En tercer lugar, está accediendo setPosition método de marker variables cuando marker no se puede definir.

Después de arreglar todo esto, su código puede verse así:

$(document).ready(function () {
    alert("Dom, dom dom dom dom");

    var map;
    var marker;

    function initialize() {
        var myLatlng = new google.maps.LatLng(40.65, -74);
        var myOptions = {
            zoom: 2,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }

        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    }

    $("#updateMap").click(function(){

    var lat = parseFloat(document.getElementById('markerLat').value);
    var lng = parseFloat(document.getElementById('markerLng').value);
    var newLatLng = new google.maps.LatLng(lat, lng);

    if (marker != undefined)
        marker.setPosition(newLatLng);
    else
        marker = new google.maps.Marker({
            position: newLatLng,
            map: map,
            draggable: true
        });
    });
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
});

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad