google.maps.MapのfitBounds(bounds:LatLngBounds)というメソッドを使うと、指定した複数座標すべてに合わせて表示領域を自動調整します。
具体的には下記のようなコードになります。
var map = new google.maps.Map(); // 表示領域を生成します。 var bounds = new google.maps.LatLngBounds(); // 地図表示領域をマーカー位置に合わせて拡大します。 bounds.extend (new google.maps.LatLng(35.46946, 139.621542)); bounds.extend (new google.maps.LatLng(35.466188, 139.622715)); // 地図表示領域の変更を反映します。 map.fitBounds (bounds);
以下、マーカーを設置して、マーカーの座標にあわせて表示領域を自動調整するサンプルコードになります。
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <div id="map" style="width:800px; height:600px;" /> <script type="text/javascript"> var locations = [ ['（株）オンラインコンサルタント', 35.46946, 139.621542], ['横浜駅', 35.466188, 139.622715], ['ランドマークタワー', 35.454948, 139.631429], ['横浜中華街', 35.443407, 139.642948], ['山下公園', 35.445877, 139.649555] ]; var map = new google.maps.Map(document.getElementById('map')); var infowindow = new google.maps.InfoWindow(); // 表示領域を生成します。 var bounds = new google.maps.LatLngBounds(); var marker; for (var i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); // 地図表示領域をマーカー位置に合わせて拡大します。 bounds.extend (marker.position); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } // 地図表示領域の変更を反映します。 map.fitBounds (bounds); </script>
- とても参考になりました！ — くーた {2013-10-30 (水) 15:10:39}