現状は、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>
回答1件
あなたの回答
tips
プレビュー