CODEWITHSUNDEEP
jquerygoogle-maps-api-3
Richard
Richard

Reputation: 1158

Google Maps api V3 update marker

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

});

Upvotes: 20

Views: 69043

Answers (2)

Yuri Stuken
Yuri Stuken

Reputation: 13590

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

Upvotes: 4

no.good.at.coding
no.good.at.coding

Reputation: 20371

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

Upvotes: 35

Related Questions