Google maps APIを使ったmapをBootstrapのmodal上で表示させる

Google maps API　前回と前々回

seto-abe.hatenablog.com

seto-abe.hatenablog.com

今回はCSSのフレームワークであるBootstrapのmodalにmapを表示させるメモ
(多分この先使わなそうだけど一応)

Bootstrapの使い方は今回割愛
いつか多分違う記事で書くかもしれない

まず、BootstrapからmodalStatic exampleのとこをまるまるコピペしてちょっと書き換える

Bootstrap↓
getbootstrap.com

Static example↓

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Static example　書き換え後↓

<!-- id="edit-modal" -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <!-- ここから -->
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-1"></div>
                <!-- id="edit-map" -->
                <div class="col-sm-10" id="edit-map"></div>
            </div>
        </form>
        <!-- ここまで足した -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

そしてjs
というかjQuery側

// .edit-btnをクリックでmap付きモーダルを表示させる
$(document).on("click", ".edit-btn", function(){
    var edit_map;

    // modal表示
    $('#edit-modal').modal('show');

    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(37.39804017154955, 140.38815960288048)
    };

    // #edit-mapにmapを表示
    edit_map = new google.maps.Map($('#edit-map').get(0), mapOptions);
});

これで実行すると...............

残念グレー
※画像の入力フォームの部分などは今回必要ないので上記のソースでは割愛してる

？？なぜグレーになってしまうのか？？

• 緯度経度の指定が間違ってる？
• modalが表示される前にmapを生成しちゃってる？
• そのせいでサイズがおかしい？
• そもそもmapがちゃんと描画できていない？

調べた結果
modalが完全に表示されてからmapを描画させないとだめ
という

当たり前っちゃ当たり前

手を加えたのはjQuery側↓

// .edit-btnをクリックでmap付きモーダルを表示させる
$(document).on("click", ".edit-btn", function(){
    var edit_map;

    // modal表示
    $('#edit-modal').modal('show');

    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(37.39804017154955, 140.38815960288048)
    };

    //modalが完全に表示されたあとの処理　こいつを足す
    $("#edit-modal").on("shown.bs.modal", function () {
        // #edit-mapにmapを表示
        edit_map = new google.maps.Map($('#edit-map').get(0), mapOptions);
    });
});

これでmapがちゃんと表示できた

modalのイベント

イベントの種類	説明
show.bs.modal	modalを呼び出したときのイベント。クリックされた要素はrelatedTargetとして使用できる。
shown.bs.modal	modalが表示された時のイベント。クリックされた要素はrelatedTargetとして使用できる。
hide.bs.modal	modalを閉じるhideイベントが発生した時のイベント。
hidden.bs.modal	modalが閉じて表示が消えた時のイベント。
loaded.bs.modal	ロードしたときのイベント…？？？ここがよくわからない

mapを再描画したいときは

google.maps.event.trigger(edit_map, "resize");