Search code examples
google-maps-api-3zoominglow-levelmarkers

Google Maps API v3 Turn Markers On Below a certain Zoom Level


I am super green and need some help for a project. With my limited knowledge of html and javascript, I was able to make a google map with a number of locations. Here is my code (forgive me if it is bad, but it worked):

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key="my key"&sensor=false">
</script>
   <style type="text/css">
     html { height: 100% }
     body { height: 100%; margin: 0px; padding: 0px }
     #map { height: 100% }
</style>
</head> 
<body> 
<div id="map"></div> 

<script type="text/javascript">

var locations = [
[47.003088, -96.929448],
[46.817268, -96.810024],
[46.842064, -96.796163],
[46.644816, -96.408616],
[46.860142, -96.751281],
[46.789894, -96.807715],
[46.844050, -96.856140],
[46.921464, -96.780208],
[46.585881, -96.843754],
[46.860947, -96.913269],
[46.844127, -96.813441],
[46.852872, -96.891369],
[46.828628, -96.775868]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 8,
  center: new google.maps.LatLng(46.827, -96.846),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    map: map
  });
 }
</script>
</body>
</html>

What I really want to do is to have the markers come on at only a closer zoom level. I don't need them on when zoomed far out. If they came on when I was close in that would be perfect.


Solution

  • I think you will have to bind on the zoom_changed event like this

    google.maps.event.addListener(map, 'zoom_changed', function() {
       var zoom = map.getZoom();
        if( zoom > minValue && zoom < maxValue) {
             //show markers if not already there
        }
        else {
            //remove markers if already there
        }
    });
    

    EDIT

    var locations = [
        [47.003088, -96.929448],
        [46.817268, -96.810024],
        [46.842064, -96.796163],
        [46.644816, -96.408616],
        [46.860142, -96.751281],
        [46.789894, -96.807715],
        [46.844050, -96.856140],
        [46.921464, -96.780208],
        [46.585881, -96.843754],
        [46.860947, -96.913269],
        [46.844127, -96.813441],
        [46.852872, -96.891369],
        [46.828628, -96.775868]
    ];
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(46.827, -96.846),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    
    var markers = [];
    
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                    map: map
                    });
      markers.push(marker);
     }
    
     var minValue = , maxValue = ;
    
     google.maps.event.addListener(map, 'zoom_changed', function() {
       var zoom = map.getZoom();
        if( zoom > minValue && zoom < maxValue) {
           for (var i = 0; i < locations.length; i++) {    
             markers[i].setMap(map);
           }
        }
        else {
           for (var i = 0; i < locations.length; i++) {    
             markers[i].setMap(null);
           }
        }
    });