twitter
facebook
InsTagram
YouTubeGoogle 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>
ポイントは以下の３つ。<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>
- 「aMapMaxMinLatLng()」で緯度経度の最大値と最小値を求めた上で、
- 「google.maps.event.addListener()」の「tilesloaded」イベントを利用して、地図を読み込み終わったときに、
- 「fitBounds()」でズーム倍率を１回だけ自動調整する。
なお、下記サイトを参考にさせていただきました。感謝。
getBoundsZoomLevelAdd
d.hatena.ne.jp/okamatan/20120904/1346722149
指定範囲を全て表示するようZoom値を自動調整「fitBounds」[GoogleMapsAPI]
mspec.jp/blog/archives/156
EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript