

GoogleMap API を使ってMapをカスタムをしています。

マーカーを複数表示したり、マーカーの種類を変える事は出来たのですが、  
「ズームレベル」でマーカを表示・非表示する事が出来ないです。

例えば  
ズームレベル「16」~「1」の時は非表示で  
ズームレベル「17」以降になると表示される。

作成中のコードは以下になります。  
どうかお力添えの程よろしくお願い申し上げます。

HTML

[code]

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="以下のjsのパス" charset="UTF-8"></script>
    <div id="map_canvas-1"></div>
    
[/code]

JavaScript

[code]

    var currentInfoWindow = null;
    
    function initialize() {
        var myLatlng = new google.maps.LatLng(34.4718128,134.3301713);
        var myOptions = {
    
            zoom: 16,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
    
        };
    
        var map = new google.maps.Map(document.getElementById("map_canvas-1"), myOptions);
    
    //−−−−−−−−−−−マーカ1−−−−−−−−−−−−−
    var LatLng1 = new google.maps.LatLng(34.4703269,134.3330037); //★マーカ位置
    var contentString1 = 
            '<div class="mapbox">test1</div>';    //★インフォウィンドウ記述
    var infowindow1 = new google.maps.InfoWindow({
            content: contentString1
        });
      var image1 = new google.maps.MarkerImage('sample.png', //★マーカ種類
          new google.maps.Size(55, 72),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));
      var shadow1 = new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',  //★マーカ影
          new google.maps.Size(64, 64),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));
    
    var marker1 = new google.maps.Marker({  //★マーカ追加
            position: LatLng1,
            map: map,
            title: "test1",
            icon: image1,
            shadow: shadow1,
            animation: google.maps.Animation.DROP
        });
    
    
    //★インフォウィンドウ1つだけ表示
    google.maps.event.addListener(marker1, 'click', function() {  //★クリックアクション
    if (currentInfoWindow) {
    currentInfoWindow.close();
    }
    infowindow1.open(map, marker1);
    currentInfoWindow = infowindow1;
    });
    
    
    //−−−−−−−−−−−マーカ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: contentString2
        });
      var image2 = new google.maps.MarkerImage('sample.png',
          new google.maps.Size(55, 72),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));
      var shadow2 = 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));
    var marker2 = new google.maps.Marker({
            position: LatLng2,
            map: map,
            title: "test2",
            icon: image2,
            shadow: shadow2,
            animation: google.maps.Animation.DROP
        });
    
    //★インフォウィンドウ1つだけ表示
    google.maps.event.addListener(marker2, 'click', function() {  //★クリックアクション
    if (currentInfoWindow) {
    currentInfoWindow.close();
    }
    infowindow2.open(map, marker2);
    currentInfoWindow = infowindow2;
    });
    
    
    } //last
    
[/code]


CC BY-SA 4.0
2017-07-21T08:14:57.660
36562
2021-03-18T04:09:15.623
2021-03-18T04:07:32.680
3060
24519
question
javascript html jquery google-maps google-api
GoogleMap API ズームレベルによってマーカーを表示、非表示にしたい


地図が操作されたことはイベントによってアプリケーションで拾うことが出来ます。  
ズームレベルの変更は `zoom_changed` イベントです。

公式のドキュメント:  
[Events | Maps JavaScript API | Google
Developers](https://developers.google.com/maps/documentation/javascript/events?hl=ja)

マーカーを消すには、マーカーの`setMap`メソッドに null を渡します。

[code]

    marker.setMap(null)
    
[/code]


CC BY-SA 4.0
2017-07-22T13:22:42.760
36591
2021-03-18T04:09:15.623
2021-03-18T04:09:15.623
3060
5793
36562
answer