Маркер обновления api V3 для Google Maps

У меня есть карта, которая загружается. Я хочу добавить маркер, который получает его лат и длинный от текстовых полей, и я не могу понять его.

Ничего не происходит, когда я нажимаю кнопку updatemap.

Здесь мой код:

$(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);

});

Ответы

Ответ 1

Обновление

Кроме того, ваша глобальная ссылка map никогда не будет установлена ​​на фактический экземпляр карты, поскольку вы затеняете ее локальным var тем же именем.

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

Это должно быть просто

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

Вы используете lat и lng для позиции маркера перед их инициализацией (если только они не установлены глобально):

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

Если вы хотите обновить позицию того же маркера, а не создать новый, вы должны просто сделать это:

$("#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);
});

Ответ 2

Во-первых, в функции initialize вы создаете новую локальную переменную map, потому что используете ключевое слово var. Эта переменная не видна вне initialize, поэтому вам нужно удалить var для использования глобальной переменной.

Во-вторых, вы используете переменные lat и lng до их определения.

В-третьих, вы получаете доступ к setPosition методу переменной marker, если marker не может быть определен.

После исправления всех этих параметров ваш код может выглядеть так:

$(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);
});