Google Maps JavaScript APIの覚書 | ワクガンス

ズームをセットする | setZoom()

setZoomメソッドを使うと地図はアニメーションしながらズーム変更される。

	map.setZoom(12) ;
	

文字列扱いの数値を指定するとエラーになる。

逆にズームを取得する場合

	var zoom = map.getZoom();
	

2019-4-17

地図表示後に1回だけ呼び出されるイベント | idle

	// 地図表示後に1回だけ呼び出されるイベント
	google.maps.event.addListenerOnce(map, 'idle', ()=>{
		alert('OK');
	});
	

2019-4-17

ズームと倍率

ズームの数値が一つ上がるたびに倍率も2倍になっていくようである。
ただし地球は真球ではないので多少の誤差はある。
設定できるズームレベルは1から21まで。

検証

ズーム15を基準に倍率を表にする。。

ズーム	緯度範囲	経度範囲	緯度倍率	経度倍率
4	24.9761889276705	56.25	2035.7622412523797	2048
5	12.54437131388627	28.125	1022.4681409567241	1024
6	6.279232643109637	14.0625	511.8084570828972	512
7	3.140497546693908	7.03125	255.97605554713772	256
8	1.5703589372031033	3.515625	127.99700702253871	128
9	0.7851932394161523	1.7578125	63.99962594449872	64
10	0.3925983410702898	0.87890625	31.999953277249784	32
11	0.19629938570574978	0.439453125	15.999994176776694	16
12	0.09814971974919828	0.2197265625	7.999999280657142	8
13	0.04907486323666177	0.10986328125	3.99999991436398	4
14	0.02453743203858494	0.054931640625	1.9999999914361084	2
15	0.012268716071826447	0.0274658203125	1	1
16	0.006134358042476862	0.01373291015625	0.5000000005349898	0.5
17	0.003067179022060884	0.006866455078125	0.2500000003345315	0.25
18	0.0015335895111334708	0.0034332275390625	0.12500000017566346	0.125
19	0.0007667947555773935	0.00171661376953125	0.06250000008870045	0.0625
20	0.0003833973778029076	0.000858306884765625	0.03125000004550852	0.03125
21	0.0001916986888979011	0.0004291534423828125	0.015625000022464686	0.015625

2019-4-17

中心座標を取得する | getCenter()

		var center = map.getCenter();
		console.log(center.lat()); // 緯度
		console.log(center.lng()); // 経度
	

2019-4-18

マーカーを削除

	marker.setMap(null);
	

2019-5-8

マップの中心を変更する

	map.setCenter(new google.maps.LatLng(26.690967684058386, 127.92949886409019 ));
	

2019-5-10

マーカーをクリック対象としない | 重なりマーカークリック問題

マーカーが重なっている場合、一番上のマーカーのクリックイベントだけが有効になる。
下に隠れているマーカーのクリックイベントを発動させたい場合、上側のマーカーのクリックを無効にする。
無効にする方法は以下の通り。

	marker.clickable = false;
	

2019-8-16

マーカーの大きさと相対位置を動的に変更する | アイコンのサイズ変更、アンカー位置調整

Demo

チェンジイベントやボタンクリックイベントなどで以下を実行

		marker.setIcon({
			url: 'icon/sakana.png',
			scaledSize:new google.maps.Size(32, 32), // アイコンの大きさ
			anchor:new google.maps.Point(0, 32), // 相対位置x,y
		});
	

2020-12-15

xxx

2019-4-17