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);
        }