勉強したことのメモ

webプログラマが勉強したことのメモ。

GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

      2021/03/11

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの位置によっては全てのマーカーが表示されない場合がある。これを何とかしたかった。調べると自動でズーム調整できる機能がある模様。

 

■サンプル

http://sample.taitan916.info/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="http://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

  関連記事

GoogleMapAPIでクリックした座標にマーカーを設置

GoogleMapAPIでクリックした位置にマーカーを設置し、座標の経度緯度をテ ...

GASを使ってみて感じたメリットとデメリット

Google Apps Scriptを色々勉強した中で感じたメリットとデメリット ...

GASで特定サイトにログインした後にスクレイピングを行う方法

Google Apps Scriptの勉強として特定サイトにログインし、その後に ...

GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...

Google map APIでマーカー(アイコン)を好きな画像に変える

Googleマップでユーザーにマーカー画像をアップロードさせて、それをマップ表示 ...

GASで「小説家になろう」サイトの更新通知をLINEに送る

Google Apps Scriptの勉強として「小説家になろう」サイトの特定小 ...

GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...

GoogleMapAPIで現在地を更新する方法

GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...

GASの実行時間計測と各種制限について

PHP等でプログラムを組んでいると、あまり実行時間について気にすることはなかった ...

Google maps apiで[ReferenceError: rd is not defined]のエラー

Google maps api使っていて、ちゃんと書いているはずなのに、 Ref ...