Webアプリケーションを作っていてGooglemap API関連の機能を作っていると
登録した地点全てを地図内に収めたい時がある。
それを行うにはJavascriptで実現していく。ネットにはいろいろ上記を実現させる方法が
書いてあったがあまり上手くいかなかった。。
今回、採用したのは以下のアルゴリズム
・初めに出来る限り、ズームアップしておく。
・次に一つ一つ対象のデータを見てそのピンが地図内に収まるようにズームアウトしていく
である。
以下にソースを載せておく。
map.js
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: ave_latitude, lng: ave_longitude} ,
zoom: 16,
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};
marker[i] = new google.maps.Marker({
position: markerLatLng,
map: map
});
bounds.extend(new google.maps.LatLng(data[i]['lat'], data[i]['lng']));
}
map.fitBounds (bounds);
}