Google Maps API V3 でズーム倍率を自動調整する

※以前別の場所で書いた文章を備忘的に書き記しておきます。

【投稿年月日】2012-09-13 【ジャンル】JavaScript

 Googleマップを表示するとき、複数のマーカーを使っている場合、ズーム倍率をどれくらいにすればいいのか結構迷ってしまう。そんなときは「fitBounds()」を使えばよい。Google Maps API V2 の「getBoundsZoomLevel()」を、より使いやすくしたメソッドである。
 少し前に公開した「市区町村ランキング情報」でも多用しており、大変便利である。

市区町村ランキング情報
city.ma-bank.net/

 以下、「fitBounds()」を使ったサンプル。ズーム倍率の初期設定は最大の「1」です。

Google Maps API v3 Example: Overlay6 (fitBounds)
tika.tisoku.net/overlay/?id=6


 

【ソース】 Google Maps API v3 Example: Overlay6 (fitBounds)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps API version3 Example: Overlay6 (fitBounds)</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var map = FIT_BOUNDS = MAX_LAT = MIN_LNG = MIN_LAT = MAX_LNG = null;
/************************************************************
Map: initialize
*************************************************************/
 function initialize() {
  var myLatlng = new google.maps.LatLng(35.472324, 133.05052);
  var myOptions = {
   zoom: 1, //最大のズーム倍率
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  AddOverlayData();
  google.maps.event.addListener(map, "tilesloaded", function(event) {
   aMapFitBounds();
  });
 }
/************************************************************
Map: AddOverlayData
*************************************************************/
 function AddOverlayData() {
  var ary = ["38.268837 140.87210", "35.689487 139.69170", "37.902551 139.02309", "34.686297 135.51966", "36.695290 137.21133", "37.902551 139.02309"];
  for(var i=0; i<ary.length; i++) {
   var latlng = ary[i].split(" ");
   new AddOverlay(i, latlng[0], latlng[1]);
  }
 }
/************************************************************
Map: AddOverlay
*************************************************************/
 function AddOverlay(id, lat, lng) {
  aMapMaxMinLatLng(lat, lng);
  this.id_ = id;
  this.lat_ = lat;
  this.lng_ = lng;
  this.setMap(map);
 }
/************************************************************
Map: AddOverlay prototype draw
*************************************************************/
 AddOverlay.prototype = new google.maps.OverlayView();
 AddOverlay.prototype.draw = function() {
  if(!this.div_) {
   this.div_ = document.createElement("div");
  }
  var div = this.div_;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
  var latlng = new google.maps.LatLng(this.lat_, this.lng_);
  var point = this.getProjection().fromLatLngToDivPixel(latlng);
  div.title = "Point" + this.id_;
  div.style.position = "absolute";
  div.style.left = point.x + "px";
  div.style.top = point.y + "px";
  div.style.border = "1px solid #666";
  div.style.background = "#fffffe";
  div.innerHTML = "<strong>Point" + this.id_ + "</strong>";
 };
/************************************************************
Map: Max Min LatLng
*************************************************************/
 function aMapMaxMinLatLng(lat, lng) {
  if(!MAX_LAT || MAX_LAT<lat) MAX_LAT = lat;
  if(!MIN_LAT || MIN_LAT>lat) MIN_LAT = lat;
  if(!MAX_LNG || MAX_LNG<lng) MAX_LNG = lng;
  if(!MIN_LNG || MIN_LNG>lng) MIN_LNG = lng;
 }
/************************************************************
Map: fitBounds
*************************************************************/
 function aMapFitBounds() {
  if(!FIT_BOUNDS) {
   var southwest = new google.maps.LatLng(MAX_LAT, MIN_LNG);
   var northeast = new google.maps.LatLng(MIN_LAT, MAX_LNG);
   var bounds = new google.maps.LatLngBounds(southwest, northeast);
   map.fitBounds(bounds);
   FIT_BOUNDS = 1;
  }
 }
/************************************************************
addEvent
*************************************************************/
 function addEvent(obj, evType, fn) {
  if(obj.addEventListener) {
   obj.addEventListener(evType, fn, false);
  }else if(obj.attachEvent) {
   obj.attachEvent("on" + evType, fn);
  }
 }
 addEvent(window, "load", initialize);
</script>
</head>
<body>
<h1>Google Maps API v3 Example: Overlay6 (fitBounds)</h1>
<div id="map_canvas" style="width:600px; height:350px;"></div>
</body>
</html>
 ポイントは以下の3つ。
  1. 「aMapMaxMinLatLng()」で緯度経度の最大値と最小値を求めた上で、
  2. 「google.maps.event.addListener()」の「tilesloaded」イベントを利用して、地図を読み込み終わったときに、
  3. 「fitBounds()」でズーム倍率を1回だけ自動調整する。
 詳しい解説については省略。ソースを読めば分かると思います。

 なお、下記サイトを参考にさせていただきました。感謝。

getBoundsZoomLevelAdd
d.hatena.ne.jp/okamatan/201...
指定範囲を全て表示するようZoom値を自動調整「fitBounds」[GoogleMapsAPI]
mspec.jp/blog/archives/156

EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript