しるてく

技術的な話をします

Google Maps JavaScript API V3のfitBounds()が全然フィットしてくれない件

javascript Google Maps

やりたいこと

google mapでマーカーを複数置いたときに、良い感じにマーカーが全部表示されるようにしたい。こんな感じ。

f:id:ofsilvers:20121016135439p:plain

ためしたこと

fitBounds()でできるかなーと思ってやってみると、どうもズームアウトしすぎてしまうらしい。

f:id:ofsilvers:20121016135445p:plain

var position = [
  new google.maps.LatLng(35.681391, 139.766103),
  new google.maps.LatLng(35.000000, 140.000000)
];

var map = new google.maps.Map(document.getElementById("map"), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var bounds = new google.maps.LatLngBounds();
for (var i = 0, l = position.length; i < l; ++i) {
  bounds.extend(position[i]);
  var marker = new google.maps.Marker({
    position: position[i],
    map: map
  });
}
map.fitBounds(bounds);

原因

どうも「航空写真」とかズームのスライダーとかがあるので、その分を差し引いてfitするようになっているっぽい？

javascript - fitbounds() in Google maps api V3 does not fit bounds - Stack Overflow

解決策

fitしないfitBoundsの代わりに、全部のマーカーが入るまでzoomOutしてあげる君を実行する。

var position = [
  new google.maps.LatLng(35.681391, 139.766103),
  new google.maps.LatLng(35.000000, 140.000000)
];

var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 16, // たくさんズームしておく
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var centerLat = 0, centerLng = 0;
for (var i = 0, l = position.length; i < l; ++i) {
  centerLat += position[i].lat();
  centerLng += position[i].lng();
  var marker = new google.maps.Marker({
    position: position[i],
    map: map
  });
}

map.setCenter(new google.maps.LatLng(centerLat / position.length, centerLng / position.length));

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
  for (var i = 0, l = position.length; i < l; ++i) {
    while( !map.getBounds().contains( position[i] ) ) {
      map.setZoom( map.getZoom() - 1);
    }
  }
});

できた

f:id:ofsilvers:20121016135439p:plain