質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

fitBoundsでマーカーをマップ内に全部表示できるように自動調整したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 29

spartanx

score 0

前提・実現したいこと

googlemapを作成していたのですが、
全てのマーカーがマップに表示されるように自動調整したくて、
調べていたのですがfitBoundsでできると知りました。
しかし、どう組み込めば機能するのかわかりません。
以下のコードに組み込みたいのですが、分かる方いらっしゃいましたらご回答よろしくお願いいたします。

発生している問題・エラーメッセージ

fitBoundsが上手く機能しない

該当のソースコード

<script>
  // 地図の作成
  var currentWindow = null;
  $(function() {
      $.getJSON("addres.json", function(markers){
          var setno = markers.length;
          var title = new Array();
          var address = new Array();
          var number = new Array();
          var tel = new Array();
          var lat = new Array();
          var lng = new Array();

          for (var i = 0; i < markers.length; i++) {
              title[i] = markers[i][0];
              address[i] = markers[i][1];
              number[i] = markers[i][2];
              tel[i] = markers[i][3];
              lat[i] = markers[i][4];
              lng[i] = markers[i][5];

          }
          initMap(setno,title,address,number,tel,lat,lng);
      });
  });
  function initMap(setno,title,address,number,tel,lat,lng) {
      var myOptions = {
          zoom: 12,
          center: new google.maps.LatLng(33.53910, 133.56010),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("sample"),myOptions);
      for (var i = 0; i < setno; i++) {
          var name = title[i];
          var ad = address[i];
          var num = number[i];
          var phone = tel[i];
          var latlng = new google.maps.LatLng(lat[i],lng[i]);
          //var icons = 'https://www.google.com/mapfiles/marker' + String.fromCharCode(65 + i) + '.png';
          createMarker(name,ad,num,phone,latlng,map);
      }
  }
  function createMarker(name,ad,num,phone,latlng,map){
      var infoWindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({position: latlng,map: map});
      google.maps.event.addListener(marker, 'click', function() {
          if (currentWindow) {
              currentWindow.close();
          }
          infoWindow.setContent(name + '<br>' + ad + '<br>' + '<a href="tel:' + num + '">' + phone + '</a>');
          infoWindow.open(map,marker);
          currentWindow = infoWindow;
          map.panTo(latlng); //markerをクリックした時に地図の中心に
      });
  }
</script>

試したこと

検索して検証していました。
https://qiita.com/mo49/items/61c7aa15591a2a8ca260

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

ご提示のページのコードの、

bounds.extend (marker.position);


marker.positionが、ご提示のコードの、

var latlng = new google.maps.LatLng(lat[i],lng[i]);


latlngです。

なので、

var latlng = new google.maps.LatLng(lat[i],lng[i]);
bounds.extend (latlng);


として、ループの後に、

map.fitBounds (bounds);


とすればいいのではないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる