Google Map APIで中心位置をfitBoundsで取得したい

Question

現状は、center: new google.maps.LatLng(,)で中心を指定していますが、fitBoundsで自動的に中心が来るように変更したいです。

以下のように変更しましたが、うまく動作しないのでアドバイス頂ければ幸いです。
もともと緯度経度を配列にしてなかったのでとりあえずテストで動けば・・・ということで変更後は雑に配列作っています。
よろしくお願いいたします。

変更前のソースコード

<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script>
var point;
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;

function inicializar() {
	// 初期設定
	var option = {
		zoom: 11,
		// 中心座標
		center: new google.maps.LatLng(35.552541, 139.577393),
		// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map"), option);
	google.maps.event.addListener(map, "click", function() {infowindow.close();});

point = new google.maps.LatLng(35.464997222222,139.47198611111);
marker = create_maker(point,"大和第2");

point = new google.maps.LatLng(35.438441666667,139.47273611111);
marker = create_maker(point,"上和田");

point = new google.maps.LatLng(35.463586111111,139.47116111111);
marker = create_maker(point,"大和大塚戸");

}

function create_maker(latlng, html) {
	// マーカーを生成
	var marker = new google.maps.Marker({position: latlng, map: map});
	// マーカーをクリックした時の処理
	google.maps.event.addListener(marker, "click", function() {
		infowindow.setContent(html);
		infowindow.open(map, marker);
	});
	gmarkers[i] = marker;
	i++;
	return marker;
}

function map_click(i) {
	google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, "load", inicializar);
</script>
   <div id="map" style="height:400px;margin-bottom:20px;"></div>  

変更後のソースコード

<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script>
var point;
var point2;　　//★★★追加した箇所
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
var bounds = new google.maps.LatLngBounds();  //★★★追加した箇所

function inicializar() {
	// 初期設定
	var option = {
		zoom: 11,
		// 中心座標
		center: new google.maps.LatLng(35.552541, 139.577393),
		// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map"), option);
	google.maps.event.addListener(map, "click", function() {infowindow.close();});

point = new google.maps.LatLng(35.464997222222,139.47198611111);
point2[] = new google.maps.LatLng(35.464997222222,139.47198611111);　　//★★★追加した箇所
marker = create_maker(point,"大和第2");

point = new google.maps.LatLng(35.438441666667,139.47273611111);
point2[] = new google.maps.LatLng(35.438441666667,139.47273611111);　　//★★★追加した箇所
marker = create_maker(point,"上和田");

point = new google.maps.LatLng(35.463586111111,139.47116111111);
point2[] = new google.maps.LatLng(35.463586111111,139.47116111111);　　//★★★追加した箇所
marker = create_maker(point,"大和大塚戸");

bounds.extend(point2);　　//★★★追加した箇所
}

function create_maker(latlng, html) {
	// マーカーを生成
	var marker = new google.maps.Marker({position: latlng, map: map});
	// マーカーをクリックした時の処理
	google.maps.event.addListener(marker, "click", function() {
		infowindow.setContent(html);
		infowindow.open(map, marker);
	});
	gmarkers[i] = marker;
	i++;
	return marker;
}

function map_click(i) {
	google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, "load", inicializar);
map.fitBounds(bounds);　　//★★★追加した箇所
</script>
   <div id="map" style="height:400px;margin-bottom:20px;"></div>  

Comments

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。http://eng-entrance.com/javascript-display-error

[igaiga]

エラー見直したら解決しました。ありがとうございました。

Answer 1

変更前のソースコードから以下のように変更して表示できるようになりました。

変更後のソースコード

<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script>
var point;
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
var bounds = new google.maps.LatLngBounds();  //★★★追加した箇所

function inicializar() {
	// 初期設定
	var option = {
		zoom: 11,
		// 中心座標
		center: new google.maps.LatLng(35.552541, 139.577393),
		// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map"), option);
	google.maps.event.addListener(map, "click", function() {infowindow.close();});

point = new google.maps.LatLng(35.464997222222,139.47198611111);
bounds.extend(point);
marker = create_maker(point,"大和第2"); 　　//★★★追加した箇所

point = new google.maps.LatLng(35.438441666667,139.47273611111);
bounds.extend(point);
marker = create_maker(point,"上和田"); 　　//★★★追加した箇所

point = new google.maps.LatLng(35.463586111111,139.47116111111);
bounds.extend(point); 　　//★★★追加した箇所
marker = create_maker(point,"大和大塚戸");

map.fitBounds(bounds); 　　//★★★追加した箇所
map.panToBounds(bounds); 　　//★★★追加した箇所
}

function create_maker(latlng, html) {
	// マーカーを生成
	var marker = new google.maps.Marker({position: latlng, map: map});
	// マーカーをクリックした時の処理
	google.maps.event.addListener(marker, "click", function() {
		infowindow.setContent(html);
		infowindow.open(map, marker);
	});
	gmarkers[i] = marker;
	i++;
	return marker;
}

function map_click(i) {
	google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, "load", inicializar);
</script>
   <div id="map" style="height:400px;margin-bottom:20px;"></div>