Googlemap API에서 모든 핀을지도에 넣고 싶을 때

웹 애플리케이션을 만들고 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);
        }