开发者

Google Maps setVisible is not a function

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 elsew开发者_运维技巧here):

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?


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;


kjy112 is on the spot, simplified to plugin direct to your code:

partnerMarkers = [
// London
    new google.maps.Marker(
    { position: new google.maps.LatLng(51.515482718, -0.142903122), 
    title: "London - Our home town and international hub." },
// Dubai
    new google.maps.Marker(
    { position: new google.maps.LatLng(25.2644444, 55.3116667), 
    title: "Middle East - Dubai desc" }
];


I'm not seeing the Marker constructor in your code

new google.maps.Marker
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜