google map api複数のマーカーのいずれかをクリックしてズームイン/ズームアウトする方法

Question

地図上にはさまざまなマーカーがあります。マーカーをクリックすると、ユーザーは拡大表示され、そのマーカーが詳細を表示する位置に集中し、mapTypeIdも地形から衛星に変化します。

マーカーを再度クリックしてズームアウトし、地図を中央に置き、mapTypeIdを地形に戻すことができるようにしたいと考えています。

マップの初期化はここにある：

var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    scrollwheel: false, 
    navigationControl: false, 
    mapTypeControl: false, 
    zoom: 11, 
    center: new google.maps.LatLng(-37.6756817,145.6690691), 
    mapTypeId: 'terrain' 
}); 
var mapzoom = map.getZoom(); 

私たちは、このような町の配列を設定します。

var locations = [ 
    // Healesville 
    ['Town: <a href="#">Healesville</a>', -37.6534206,145.5117927, 'uploaded-images/marker-red-32h.png',0], 
    // Warburton 
    ['Town: <a href="#">Warburton</a>', -37.7514003,145.6919378, 'uploaded-images/marker-red-32h.png',1], 
    [...], 
    [...], 
    [...] 
]; 

インをズームインする最初のアクションのコードはここにある：

var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     map.panTo(this.getPosition()); 
     map.setZoom(16); 
     map.setMapTypeId('satellite'); 
    } 
})(marker, i)); 

2番目の部分はズームアウトすると開始しました。

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoomLevel = map.getZoom(); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     if(zoomLevel > 11) { 
      return function() { 
       var center = new google.maps.LatLng(-37.6756817,145.6690691); 
       map.setCenter(center); 
       map.setZoom(11); 
       map.setMapTypeId('terrain'); 
      } 
     } else { 
      return function() { 
       map.panTo(this.getPosition()); 
       map.setZoom(16); 
       map.setMapTypeId('satellite'); 
      } 
     } 
    })(marker, i)); 
} 

残念ながら、ズームアウトスクリプトは、マーカーの配列の最後のマーカーでのみ機能しました。マップ上の各マーカーの元の設定にズームアウトする方法を検討する必要があります。

Answer 1

ズーム処理コードの最後のマーカを参照するだけです（最後のループの最後の値に設定されています）。マーカークリック機能にコードを追加するだけで簡単にできます。私が何をしたいことは、このだと思う：

var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    zoomLevel = map.getZoom(); 
    if (zoomLevel <= 11) { 
     map.panTo(this.getPosition()); 
     map.setZoom(16); 
     map.setMapTypeId('satellite'); 
    } else { 
     var center = new google.maps.LatLng(-37.6756817, 145.6690691); 
     map.setCenter(center); 
     map.setZoom(11); 
     map.setMapTypeId('terrain');  
    } 
    }})(marker, i)); 
} 

あなたが動的に表示マーカーの境界を計算し、その範囲でマップフィット境界を呼び出すことにより、センター/ズーム（というよりも、現在ではあるコードを計算することもできます他

proof of concept fiddle

コードスニペット：

var zoomLevel; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    scrollwheel: false, 
 
    navigationControl: false, 
 
    mapTypeControl: false, 
 
    zoom: 11, 
 
    center: new google.maps.LatLng(-37.6756817, 145.6690691), 
 
    mapTypeId: 'terrain' 
 
    }); 
 
    var mapzoom = map.getZoom(); 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
     lat: locations[i][1], 
 
     lng: locations[i][2] 
 
     }, 
 
     map: map 
 
    }) 
 
    var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     zoomLevel = map.getZoom(); 
 
     if (zoomLevel <= 11) { 
 
      map.panTo(this.getPosition()); 
 
      map.setZoom(16); 
 
      map.setMapTypeId('satellite'); 
 
      clickedMarker = marker; 
 
     } else { 
 
      var center = new google.maps.LatLng(-37.6756817, 145.6690691); 
 
      map.setCenter(center); 
 
      map.setZoom(11); 
 
      map.setMapTypeId('terrain'); 
 
     } 
 

 
     } 
 
    })(marker, i)); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var locations = [ 
 
    // Healesville 
 
    ['Town: <a href="#">Healesville</a>', -37.6534206, 145.5117927, 'uploaded-images/marker-red-32h.png', 0], 
 
    // Warburton 
 
    ['Town: <a href="#">Warburton</a>', -37.7514003, 145.6919378, 'uploaded-images/marker-red-32h.png', 1], 
 
];

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>