Patrick McCreanor Patrick McCreanor - 5 months ago 22
Javascript Question

Marker Visibility In Google Maps

I'm building a treasure hunter app and I need to be able to hide a marker and only make it visible at a certain zoom level.

How do I achieve this?

I'm using a custom marker and google maps v3.

Thanks.

Oh and what's weird is that I can turn the visibility off at a certain zoom level like in the following code:

var marker = new google.maps.Marker({
draggable: false,
raiseOnDrag: false,
clickable: true,
icon: image,
shadow: shadow,
shape: shape,
map: map,
url: 'http://www.google.com/',
visible: true,
position: markerLatlng
});

var zoomLevel;
//marker.visible = false;

google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});

var infowindow = new google.maps.InfoWindow(
{
content: 'Oh You Found Me!!!',
size: new google.maps.Size(25,25),
position: myLatlng
});


google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();

if (zoomLevel == 16) {

marker.visible = false;

infowindow.open(map,marker);

}
});


but if I reverse the marker.visibility such that:

var marker = new google.maps.Marker({

draggable: false,

raiseOnDrag: false,

clickable: true,

icon: image,

shadow: shadow,

shape: shape,

map: map,

url: 'http://www.google.com/',



visible: false,

position: markerLatlng

});

google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();

if (zoomLevel == 16) {

marker.visible = true;

infowindow.open(map,marker);

}
});


The marker won't show up on the map at all.

Answer

The proper way of setVisible is marker.setVisible(false);

Comments