Google Maps APIでマーカーが全て表示されるように自動ズームする方法
2024/01/13
Google Maps APIでマーカーを複数設置した場合にズームの値や、マーカーの位置によっては全てのマーカーが表示されない場合がある。これを何とかしたかった。調べると自動でズーム調整できる機能がある模様。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/autozoom/
ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>GoogleMapsAPI 自動ズームテスト</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="map_canvas" style="width:500px; height:500px;"></div>
<script>
var mapData = [
{ 'name':'大阪城', 'x':'34.687315', 'y':'135.526201'},
{ 'name':'通天閣', 'x':'34.644885', 'y':'135.494516'},
{ 'name':'道頓堀', 'x':'34.668548', 'y':'135.502715'},
{ 'name':'京都タワー', 'x':'34.987574', 'y':'135.759362'},
];
var minLat = 999;
var maxLat = 0;
var minLng = 999;
var maxLng = 0;
var currentWindow = null;
var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);
var myOptions = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成
for (var key in mapData){
makeMarker(mapData[key]);
}
autoZoom( maxLat, minLat, maxLng, minLng );
//マーカー作成
function makeMarker( mapData ){
if( !mapData ) return false;
if(mapData.x < minLat) minLat = mapData.x;
if(mapData.x > maxLat) maxLat = mapData.x;
if(mapData.y < minLng) minLng = mapData.y;
if(mapData.y > maxLng) maxLng =mapData.y;
var marker = new google.maps.Marker({
position : new google.maps.LatLng(mapData.x,mapData.y),
map: map
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if( currentWindow ) currentWindow.close();
infoWindow.setContent(mapData.name);
infoWindow.open(map,marker);
currentWindow = infoWindow;
});
}
//オートズーム
function autoZoom( maxLat, minLat, maxLng, minLng ){
if( !maxLat || !minLat || !maxLng || !minLng ) return false;
var sw = new google.maps.LatLng(maxLat,minLng);
var ne = new google.maps.LatLng(minLat,maxLng);
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>GoogleMapsAPI 自動ズームテスト</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="map_canvas" style="width:500px; height:500px;"></div>
<script>
var mapData = [
{ 'name':'大阪城', 'x':'34.687315', 'y':'135.526201'},
{ 'name':'通天閣', 'x':'34.644885', 'y':'135.494516'},
{ 'name':'道頓堀', 'x':'34.668548', 'y':'135.502715'},
{ 'name':'京都タワー', 'x':'34.987574', 'y':'135.759362'},
];
var minLat = 999;
var maxLat = 0;
var minLng = 999;
var maxLng = 0;
var currentWindow = null;
var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);
var myOptions = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成
for (var key in mapData){
makeMarker(mapData[key]);
}
autoZoom( maxLat, minLat, maxLng, minLng );
//マーカー作成
function makeMarker( mapData ){
if( !mapData ) return false;
if(mapData.x < minLat) minLat = mapData.x;
if(mapData.x > maxLat) maxLat = mapData.x;
if(mapData.y < minLng) minLng = mapData.y;
if(mapData.y > maxLng) maxLng =mapData.y;
var marker = new google.maps.Marker({
position : new google.maps.LatLng(mapData.x,mapData.y),
map: map
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if( currentWindow ) currentWindow.close();
infoWindow.setContent(mapData.name);
infoWindow.open(map,marker);
currentWindow = infoWindow;
});
}
//オートズーム
function autoZoom( maxLat, minLat, maxLng, minLng ){
if( !maxLat || !minLat || !maxLng || !minLng ) return false;
var sw = new google.maps.LatLng(maxLat,minLng);
var ne = new google.maps.LatLng(minLat,maxLng);
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>GoogleMapsAPI 自動ズームテスト</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="map_canvas" style="width:500px; height:500px;"></div>
<script>
var mapData = [
{ 'name':'大阪城', 'x':'34.687315', 'y':'135.526201'},
{ 'name':'通天閣', 'x':'34.644885', 'y':'135.494516'},
{ 'name':'道頓堀', 'x':'34.668548', 'y':'135.502715'},
{ 'name':'京都タワー', 'x':'34.987574', 'y':'135.759362'},
];
var minLat = 999;
var maxLat = 0;
var minLng = 999;
var maxLng = 0;
var currentWindow = null;
var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);
var myOptions = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成
for (var key in mapData){
makeMarker(mapData[key]);
}
autoZoom( maxLat, minLat, maxLng, minLng );
//マーカー作成
function makeMarker( mapData ){
if( !mapData ) return false;
if(mapData.x < minLat) minLat = mapData.x;
if(mapData.x > maxLat) maxLat = mapData.x;
if(mapData.y < minLng) minLng = mapData.y;
if(mapData.y > maxLng) maxLng =mapData.y;
var marker = new google.maps.Marker({
position : new google.maps.LatLng(mapData.x,mapData.y),
map: map
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if( currentWindow ) currentWindow.close();
infoWindow.setContent(mapData.name);
infoWindow.open(map,marker);
currentWindow = infoWindow;
});
}
//オートズーム
function autoZoom( maxLat, minLat, maxLng, minLng ){
if( !maxLat || !minLat || !maxLng || !minLng ) return false;
var sw = new google.maps.LatLng(maxLat,minLng);
var ne = new google.maps.LatLng(minLat,maxLng);
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);
}
</script>
</body>
</html>
その他
fitBoundsメソッドで対応できるみたい。これは便利。
関連記事
-
-
Google Maps APIで複数のマーカーをまとめる方法
Google Maps APIでマーカーを複数表示し、近隣のエリアごとにまとめて ...
-
-
GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得
GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...
-
-
Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法
やりたかった事は以下の通り。 mysqlから経度緯度、マーカー名、マーカーIDを ...
-
-
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法
GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...
-
-
Google Maps APIで都道府県の中心地と県庁所在地にマーカーを立てる方法
Google Maps APIで都道府県の中心地もしくは県庁所在地にマーカーを立 ...