I want to show and hide markers by GoogleMap API zoom level

I'm customizing the map using the Google Map API.

I was able to display multiple markers and change the type of markers, but
I cannot display or hide the marker at Zoom Level.

For example
Hide
when zoom level is "16" to "1" Displayed when zoom level "17" or higher.

The code being created is as follows.
Thank you for your help.

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="path for js below" charset="UTF-8"></script>
<divid="map_canvas-1"></div>

JavaScript

var currentInfoWindow=null;

function initialize() {
    var myLatlng = new google.maps.LatLng (34.4718128, 134.3301713);
    varmyOptions={

        zoom:16,
        center —myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,

    };

    varmap = new google.maps.Map( document.getElementById("map_canvas-1"), myOptions);

// --------------------------- Marker 1 ---------------
var LatLng1 = new google.maps.LatLng (34.4703269, 134.3330037); // ★ Marker Location
var contentString1 = 
        '<div class="mapbox">test1</div>';//★info-window description
var infowindow1 = new google.maps.InfoWindow({
        content —ContentString 1
    });
  var image1 = new google.maps.MarkerImage('sample.png', // ★ marker type
      new google.maps.Size (55,72),
      new google.maps.Point(0,0),
      new google.maps.Point(0,32));
  varshadow1 = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',//★Marker Shadow
      new google.maps.Size (64,64),
      new google.maps.Point(0,0),
      new google.maps.Point(0,32));

varmarker1 = new google.maps.Marker({//★add marker)
        position:LatLng1,
        map —map,
        title: "test1",
        icon: image1,
        shadow —show1,
        animation —Google.maps.Animation.DROP
    });


// ★ Display only one info window
google.maps.event.addListener(marker1, 'click', function() {//★click action
if(currentInfoWindow){
currentInfoWindow.close();
}
infowindow1.open(map,marker1);
currentInfoWindow=infowindow1;
});


// ----------------------------- Marker 2 -------------
var LatLng2 = new google.maps.LatLng (34.4718128, 134.3301713);
var contentString2 = 
        '<div class="mapbox">test2</div>';   
var infowindow2 = new google.maps.InfoWindow({
        content —ContentString 2
    });
  varimage2 = new google.maps.MarkerImage('sample.png',
      new google.maps.Size (55,72),
      new google.maps.Point(0,0),
      new google.maps.Point(0,32));
  varshadow2 = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/rail.shadow.png',
      new google.maps.Size (64,64),
      new google.maps.Point(0,0),
      new google.maps.Point(0,32));
varmarker2 = new google.maps.Marker({
        position:LatLng2,
        map —map,
        title: "test2",
        icon —image2,
        shadow —shadow2,
        animation —Google.maps.Animation.DROP
    });

// ★ Display only one info window
google.maps.event.addListener(marker2, 'click', function() {//★click action
if(currentInfoWindow){
currentInfoWindow.close();
}
infowindow2.open(map, marker2);
currentInfoWindow=infowindow2;
});


} // last

javascript html jquery google-maps google-api

2022-09-30 11:27