ズームレベルの範囲を指定したのにも関わらず動作しない場合の対処法【Google Maps V3】

ちょっとGoogle Maps絡みでズームレベルの範囲を指定したのにも関わらず動作しない場合があったのでこの時の対処法です。

ズームレベルの範囲の指定に関しては、Google Maps 活用講座を参考に下記のようなコードを書きます。

google.maps.event.addListenerOnce(map, "projection_changed", function(){
	map.setMapTypeId(google.maps.MapTypeId.HYBRID);
	setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
	setZoomLimit(map, google.maps.MapTypeId.HYBRID);
	setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
	setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
	map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
});
function setZoomLimit(map, mapTypeId){
	var mapTypeRegistry = map.mapTypes;
	var mapType = mapTypeRegistry.get(mapTypeId);
	mapType.maxZoom = 19;
	mapType.minZoom = 2;
}

これでだいたいは問題ないのですが、今回のケースだけうまく動作しませんでした。そのケースというのが、1ページに複数のマップを表示です。

複数表示といっても、今回のケースは下記です。

  • マップ1：ページに常に表示
  • マップ2：あるボタンを押すと表示される（ボタンが押されなければ表示されない）

というものです。マップ1のほうは、特に説明は要らないと思いますが、マップ2がちょっと特殊な感じです。loadされたときに表示ではなくて、clickされたときに表示です。

マップ1の表示のコードはこのページに書いているコードそのものになります。

一方、マップ2の表示は、下記のようになります。（それなりにだいぶ端折ってます。）

var $html = '<div id="gmap"></div>';
$(".mapBtn").click(function(){
	$("#gmap").remove();
	$(this).after($html);

	var latlng2 = new google.maps.LatLng(34.679526, 135.178021);
	var opt = {
		zoom: 10,
		center: latlng2,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true
	};
	var map2 = new google.maps.Map($("#gmap").get(0), opt);
	var marker2 = new google.maps.Marker({
		position: new google.maps.LatLng(34.679526, 135.178021),
		map: map2
	});
	google.maps.event.addListener(marker2, 'click', function(){
		if(infowindow2) { infowindow2.close(); }
		infowindow2 = new google.maps.InfoWindow({
			content: ほげ
		});
		infowindow2.open(map2, marker2);
	});
	google.maps.event.addListenerOnce(map2, "projection_changed", function(){
		map2.setMapTypeId(google.maps.MapTypeId.HYBRID);
		setZoomLimit(map2, google.maps.MapTypeId.ROADMAP);
		setZoomLimit(map2, google.maps.MapTypeId.HYBRID);
		setZoomLimit(map2, google.maps.MapTypeId.SATELLITE);
		setZoomLimit(map2, google.maps.MapTypeId.TERRAIN);
		map2.setMapTypeId(google.maps.MapTypeId.ROADMAP);
	});
	function setZoomLimit(map2, mapTypeId){
		var mapTypeRegistry = map2.mapTypes;
		var mapType = mapTypeRegistry.get(mapTypeId);
		mapType.maxZoom = 19;
		mapType.minZoom = 2;
	}
	return false;
});

しかし、この場合だとズームレベルの範囲が2から19の範囲が適用されませんでした。原因がなにかなーと探っていくと、結果的にはprojection_changedをtilesloadedやzoom_changedに変更すれば動作しました。ドキュメントを読んでもいまいちピンとこなかったというのもあるので、なかなかハマりました。

ズームレベルの範囲を指定したのにも関わらず動作しない場合は、下記のようにお試しください。（zoom_changedのところをtilesloadedでもOKです。）

google.maps.event.addListenerOnce(map, "zoom_changed", function(){
	map.setMapTypeId(google.maps.MapTypeId.HYBRID);
	setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
	setZoomLimit(map, google.maps.MapTypeId.HYBRID);
	setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
	setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
	map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
});
function setZoomLimit(map, mapTypeId){
	var mapTypeRegistry = map.mapTypes;
	var mapType = mapTypeRegistry.get(mapTypeId);
	mapType.maxZoom = 19;
	mapType.minZoom = 2;
}