Question

Here is my markers[] array:

partnerMarkers = [
        // London
        { lat: 51.515482718, lng: -0.142903122, name: "London", content: "Our home town and international hub." },
// Dubai
        { lat: 25.2644444, lng: 55.3116667, name: "Middle East", content: "Dubai desc" }
];

I have this function, looping through the array of markers (triggered by a button elsewhere):

function toggle_layer(markers) {
    for (var i=0; i<markers.length; i++) {
        markers[i].setVisible(false);
    }
}

I get markers[i].setVisible is not a function – but then this works fine:

function toggle_layer(markers) {
    for (var i=0; i<markers.length; i++) {
        console.log(markers[i]);
    }
}

Why does setVisible not work in this context?

Answer 1

Here is the JSFiddle Demo:

Seems like your markers are just objects instead of google.maps.Markers, and thus it does not have setVisible() function within it. You basically want to convert the data within your Object into a google.maps.Marker object. I created a global array gooMarker to hold the Markers. By clicking on the link below the map, it’ll hide the markers. Here is the way to create Markers and then hide them:

HTML Markup:

<div id='parent'>
    <div id="map_canvas" style="width: 650px; height: 550px;"></div>
</div>
<div id='hidemark'>Click to hide markers</div>

JavaScript + Google Map V3 API:

var map;
var gooMarker = [];

var partnerMarkers = [
   {
    lat: 51.515482718,
    lng: -0.142903122,
    name: "London",
    content: "Our home town and international hub."},
    {
    lat: 25.2644444,
    lng: 55.3116667,
    name: "Middle East",
    content: "Dubai desc"}
];

function initialize() {

    var london = new google.maps.LatLng(51.5, 0);

    var myOptions = {
        backgroundColor: '#FFFFF',
        zoom: 2,
        center: london,
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map_canvas = document.getElementById("map_canvas");

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

    for (var i = 0; i < partnerMarkers.length; i++) {
        gooMarker.push(new google.maps.Marker({
            position: new google.maps.LatLng(partnerMarkers[i].lat, partnerMarkers[i].lng),
            map: map,
            title: partnerMarkers[i].name
        }));
    }
}

function hideMarkers(){
    for(var i=0; i<gooMarker.length; i++){
        gooMarker[i].setVisible(false);
    }
}

document.getElementById('hidemark').onclick = hideMarkers;

window.onload = initialize;