0

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

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

例えば
ズームレベル「16」~「1」の時は非表示で
ズームレベル「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>

JavaScript

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
1

1 件の回答 1

1

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

公式のドキュメント:
Events | Maps JavaScript API | Google Developers

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

marker.setMap(null)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。