Google Maps api V3 update marker

Question

I've got a map that loads. I want to add a marker that gets it's lat and long from text boxes, and I can't fathom it.

Nothing happens when I click on the updatemap button.

Here's my code so far:

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

});

Answer 1

Update

Also, your global map reference is never set to the actual map instance since you shadow it with a local var same name.

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

This should be just

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

---

You're using lat and lng for the marker position before they're initialized (unless they're globally set somewhere):

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

If you want to update the position of the same marker and not create a new one, you should simply be doing this:

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

Answer 2

First, in initialize function you are creating new local map variable, because you use var keyword. This variable is not visible outside initialize, so you need to remove var to use global variable.

Second, you are using lat and lng variables before they are defined.

Third, you are accessing setPosition method of marker variable when marker may not be defined.

After fixing all of these your code may look like this:

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