GoogleMap API ズームレベルによってマーカーを表示、非表示にしたいです。
いつもお世話になっております。
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>
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