GoogleMap API V3について マーカーの表示方法

Question

いつもお世話になっております。

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

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

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

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

html▼

<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>

js▼

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

Answer 1

解決済みのようですが、MarkerManagerを使ってみるのはいかがでしょう？
MarkerManager v3 v1.1 Reference

MarkerManager を使うと、異なるズームレベルでどのマーカを見せたいか、個別に定義できる。

Google Maps に大量のマーカを表示する - Too Many Markers! - Qiita

Answer 2

zoom_changedイベント時にマーカーを再描画（削除して必要なものだけ追加）すればよいのでは。

【zoom_changed - Mapクラスのイベント | Google Maps JavaScript API v3 日本語リファレンス】
https://syncer.jp/google-maps-javascript-api-matome/map/event/zoom_changed/

Comments

[退会済みユーザー]

早速のご回答ありがとうございます！

申し訳ございません、
イベントの作成した中のプログラムをどう書けば
ズームが「16」の時は非表示、
ズームが「17」以降は表示される動きになるのかが分かりません（；；）

/* イベントの作成 */
google.maps.event.addListener( map , 'zoom_changed' , function()
{
// ？？？
}

ご教授頂ければ幸いでございます。

[kei344]

イベントの中でマップのズームを取得して、それの数値によってマーカーを削除するだけですよ。

[退会済みユーザー]

ご回答ありがとうございます！

調べて試してみたのですが
やはりできないです。。すみません。

下記で試してみたのですが、おかしい所があればご教授くださいませm(_ _)m

google.maps.event.addListener( map , 'zoom_changed' , function()
{
map.getZoom(17) ;
var marker1 = new google.maps.Marker({
visible: false
});
});

ご面倒をおかけしますが宜しくお願いします。
ベストアンサーにさせて頂きますm(_ _)m

[kei344]

解決していないならベストアンサーにする必要はないですよ。
getZoomは下記のようにして使います。
var currentZoom = map.getZoom(); // 現在のズームを取得

【Map.getZoom() - ズーム値を取得する】
https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/getZoom/

マーカーについては marker1.setMap( null ); で消せますが、Lhankor_Mhyさんの提示されているようなライブラリを使用するのも手段だと思います。

[退会済みユーザー]

度々のご回答ありがとうございます！

ずっと試していて下記コードでは
消えたのですが、それ以降消えっぱなしになってしまいました...。

ズームレベルが戻ると
マーカーも戻る指定は出来ますでしょうか？？（；；）

google.maps.event.addListener( map , 'zoom_changed' , function()
{
var currentZoom = map.getZoom(); // 現在のズームを取得
marker1.setMap( null );
});

[kei344]

「★マーカ追加」とコード内に書かれているようにマーカーを作ってマップに紐付けるだけですよ。
Lhankor_Mhyさんの提示されているライブラリは追加と削除をライブラリ側で行うようにしています。