Skip to main content
本文から 89 文字削除; タイトルを編集
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

GoogleMap API ズームレベルによってマーカーを表示、非表示にしたいです。

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

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

html ▼-------------------------------------HTML

js ▼-------------------------------------JavaScript

GoogleMap API ズームレベルによってマーカーを表示、非表示にしたいです。

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

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

html ▼-------------------------------------

js ▼-------------------------------------

GoogleMap API ズームレベルによってマーカーを表示、非表示にしたい

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

HTML

JavaScript

Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
ソース リンク

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