jquery - 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);
});