Gmaps.js add / remove markers from an array

Question

I want to show or hide some markers when the user clicks on the checkbox. I am using Gmaps.js and the code responsible for this is:

// Check if the user wants to display points of interest
$("#poi").click(function() {
    var poi_markers = [];

    if ($("#poi").is(':checked')) {
        // Get points of interest and display them on the map
        $.ajax({
            type: "POST",
            url: "/ajax/poi.php",
            dataType: "JSON",
            cache: false,
            success: function(data) {
                $.each(data, function(key, value) {
                    poi_marker = {
                        marker: {
                            lat: value.latitude,
                            lng: value.longitude,
                            icon: '/images/marker-sight.png',
                            infoWindow: {
                                content: value.name
                            }
                        }
                    }
                    poi_markers.push(poi_marker);
                });

                console.log(poi_markers);

                map.addMarkers(poi_markers);
            }
        });
    } else {
        map.removeMarkers(poi_markers);
    }
});

JSON example:

[{"name":"Biserica Neagra","latitude":"45.640981","longitude":"25.587723"}]

In Firebug, I get this error: "uncaught exception: latitude or longitude not defined."

What am I doing wrong?

Answer 1

Problem number 1

addMarkers()  the function takes an array of markers as a parameter. But you give it an array of objects with a marker property. They should be declared in this way:

poi_marker = {
    lat: value.latitude,
    lng: value.longitude,
    infoWindow: {
        content: value.name
    }
}

Problem number 2

removeMarkers() , . :

map.removeMarkers();

---

/

, , , , Ajax , :

var gMarkers = {}, realMarkers = {};

gMarkers['bars'] = [
    {lat:"45.640981",lng:"25.587723",infoWindow:{content:"Irish Pub"}},
    {lat:"45.645911",lng:"25.582753",infoWindow:{content:"Beer King"}}
];

gMarkers['transportation'] = [
    {lat:"45.645981",lng:"25.590723",infoWindow:{content:"Subway"}},
    {lat:"45.640981",lng:"25.583723",infoWindow:{content:"Train"}},
    {lat:"45.636981",lng:"25.580723",infoWindow:{content:"Airport"}}
];

, Object gMarkers, g Gmaps.js, Google Maps, . realMarkers.

Gmaps.js / , 2 , .

addMarkersOfType()

/* Takes the poi type as a parameter */

GMaps.prototype.addMarkersOfType = function (poi_type) {
    // clear markers of this type
    realMarkers[poi_type]=[];
    // for each Gmaps marker
    for(var i=0; i<gMarkers[poi_type].length; i++){
        // add the marker
        var marker = map.addMarker(gMarkers[poi_type][i]);
        // save it as real marker
        realMarkers[poi_type].push(marker);
    }
}

removeMarkersOfType()

/* Takes the poi type as a parameter */

GMaps.prototype.removeMarkersOfType = function (poi_type) {
    // for each real marker of this type
    for(var i=0; i<gMarkers[poi_type].length; i++){
        // remove the marker
        realMarkers[poi_type][i].setMap(null);
    }
    // clear markers of this type
    realMarkers[poi_type]=[];
}

$("#bar_poi").click(function() {
    if ($(this).is(':checked')) 
        map.addMarkersOfType("bars");
    else 
        map.removeMarkersOfType("bars");
});

JS Fiddle Demo

Answer 2

setVisible(true|false), , .