CODEWITHSUNDEEP
javascriptandroidgoogle-maps
Samir Junaid
Samir Junaid

Reputation: 113

How to hide marker when zoom out?

I'm working on android app by JavaScript, I want to know how can I hide map marker when I zoom out less than 15 with Google map, this the code which I use:

function success1(position) {
    var bangalore = { lat: 24.7511, lng: 46.6568 };
    var gift = { lat: 24.7906, lng: 46.6312 };
    var map = new google.maps.Map(document.getElementById('mapp'), {
    zoom: 17,
    streetViewControl: false,
    panControl: false,
    disableDoubleClickZoom: true,
    TiltGestures: false,
    AllGestures: false,
    ZoomGestures: false,
    ScrollGestures: false,
    zoomControl: false,
    scrollwheel: false,
    center: bangalore
    });        
    var image = 'http://iconbug.com/download/size/32/icon/7605/yellow-gift-box/';
    zoom = map.getZoom();
    var zoom = map.getZoom();
    var beachMarker = new google.maps.Marker({
    position: gift,
    map: map,
    icon: image,
    });         
    }

Upvotes: 1

Views: 2590

Answers (3)

KENdi
KENdi

Reputation: 7781

To remove/hide a marker from the map, call the setMap() method passing null as the argument.

marker.setMap(null);

The .setMap(null) function will keep the marker from showing on the map. You can also use this in hiding polygon and polyline. 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    if (zoom <= 15) { 
        marker.setMap(null); 
    } else { 
        marker.setMap(map); 
    } 
});

Note that the above method does not delete the marker. It simply removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.

Upvotes: 3

Jyotman Singh
Jyotman Singh

Reputation: 11350

This is the java code. Hope you can convert it to Javascript.

Set Camera change listener. If the new zoom level is less than the previous zoom level then it means a zoom out happened so hide the marker.

mMap.setOnCameraChangeListener(new OnCameraChangeListener() {

private float currentZoom = mMap.zoom;

@Override
public void onCameraChange(CameraPosition newPosition) {
    if (newPosition.zoom < currentZoom){
        // remove a particular marker
        yourMarker.remove();
       // or remove all the markers
       mMap.clear();
    }
}
});

Upvotes: 1

ScaisEdge
ScaisEdge

Reputation: 133400

There aren't specific attribute for show/hide marker on zoom level you must check the zoom level 

  var image = 'http://iconbug.com/download/size/32/icon/7605/yellow-gift-box/';
  if (zoomLevel>=15 ) { 
      var beachMarker = new google.maps.Marker({
        position: gift,
        map: map,
        icon: image,
      });    
  }

for hide 

  if (zoomLevel<15 ) { 
      beachMarker.setMap(null);
  }

Upvotes: 0

Related Questions