CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3
Evan Morrison
Evan Morrison

Reputation: 692

Google Maps v3 markers not refreshing

So I have 3 Divs with hidden Lat Lng inputs, and some ajax pagination to change them out. On the initial load, I have a script that turns each one of the three pairs of Lat Lng inputs into a marker and pushes them into an array. All of this works good.

Now, when I update the 3 divs with my script file, and then try to use the provided v3 API method to clear and redraw the markers, I get the same spots on the map. And then, if I tell it to go back to page one results, it does delete the page 1 markers and I get the markers from page 2 on my map.

Here is the javascript:

var map;
var markers = [];
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(37.09024, -96.712891),
        zoom: 3
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    setRGBmarkers();
}

function setRGBmarkers() {
    markers.push(new google.maps.Marker({
        position: new google.maps.LatLng(
            Number(document.getElementById("address-0-Lat").value),
            Number(document.getElementById("address-0-Lng").value)
            ),
        map: map
    }));
    //removed other markers for brevity
}

function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setAllMap(null);
}

function deleteMarkers() {
    clearMarkers();
    markers = [];
}

var getPage = function () {
    var $a = $(this);

    var options = {
        url: $a.attr("href"),
        type: "get"
    };

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-nerd-target");
        $(target).replaceWith(data);
    });
    deleteMarkers();
    setRGBmarkers();
    alert('done');
    return false;
}

$(".body-content").on("click", ".pagedList a", getPage);

So it successfully goes out and gets the results. I'm guessing it somehow is running delete and set before its actually done replacing the markers so its setting the 'unreplaced data' again, hence why going back to page one results finally in page 2's markers showing up? Here's a snippet of what the div looks like if needed:

    <div class="panel-body">
    Event Description
        <input id="address-0-Lat" type="hidden" value="34.0519079">
        <input id="address-0-Lng" type="hidden" value="-118.24389300000001">
    </div>

Upvotes: 0

Views: 1378

Answers (1)

Evan Morrison
Evan Morrison

Reputation: 692

Well, Anto is correct, and upon investigating the jQuery documentation for the ajax() function, I see the correct place to put the code would be like so:

var getPage = function () {
    var $a = $(this);

    var options = {
        url: $a.attr("href"),
        type: "get"
    };

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-nerd-target");
        $(target).replaceWith(data);
        deleteMarkers();
        setRGBmarkers();
        alert('done');
    });
    return false;
}

$(".body-content").on("click", ".pagedList a", getPage);

Where the 'done' function is executed once the response comes back. Documenation and examples can be found here: http://api.jquery.com/jquery.ajax/

Upvotes: 1

Related Questions