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

Asked 1 months ago, Updated 1 months ago, 2 views

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

1 Answers

The manipulation of the map can be picked up by the application depending on the event.
The zoom level change is the zoom_changed event.

Official Documentation:
Events|Maps JavaScript API|Google Developers

To clear the marker, pass null to the marker's setMap method.

 marker.setMap(null)


2022-09-30 11:27

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.