Google Map Api 地図表示を複数回行う

Question

Google map api v3にて1ページに地図を複数回表示する処理をjavascriptで実装したいのですが、うまく行きません。。

var geocoder;
var map;

$(function() {
	geocoder = new google.maps.Geocoder();
	testFunction();
});

function testFunction() {

	var options = {
			zoom: 18
			,mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map;

	for (var i = 1; i <= 2; i++) {

		var map = new google.maps.Map(document.getElementById('map_canvas_' + i), options);

		geocoder.geocode({'address': $('#address_' + i).val()}, function(results, status) {

			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map
					,position: results[0].geometry.location
				});
			} else {
				alert("Geocode was not successful for the following reason: " + status);
			}
		});

		map = new google.maps.Map(document.getElementById('map_canvas_' + i), options);

	}
}

上記のコードだと、2番目の地図が表示され、一番目の地図は表示されません。
このAPIの仕様について詳しい方ご教授お願い致します。

Answer 1

JavaScriptでは for は var のブロックを形成しないので、map が毎回上書きされているからだと思います。

色々書き方はありますが、とりあえず表示するだけなら下記のようにできると思います。mapを配列にしたりするのもよく使う手ではあります。

$(function() {
	for (var i = 1; i <= 2; i++) {
		testFunction( i );
	}
});
function testFunction( i ) {
	var geocoder = new google.maps.Geocoder();
	var options = {
			zoom: 18
			,mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById('map_canvas_' + i), options);
	geocoder.geocode({'address': $('#address_' + i).val()}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			var marker = new google.maps.Marker({
				map: map
				,position: results[0].geometry.location
			});
		} else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	});
	map = new google.maps.Map(document.getElementById('map_canvas_' + i), options);
} // 未テスト

Comments

[miyagi1987]

kei344さん

上記の処理で表示することが出来ました。
ありがとうございます！！
かなりハマっておりまして、すっきりしました。