[解決済み] google.maps.event.trigger(map, 'resize')の使い方

質問

私はJS初心者ですが、以前の質問の答えを見つけ、それが新たな質問を呼び起こし、再びここにやってきました。

私はGoogle Map APIを含むReveal Modalを持っています。 ボタンがクリックされると、Reveal Modalがポップアップし、Google Mapが表示されます。 問題は、マップの3分の1しか表示されないことです。 これは、リサイズトリガーを実装する必要があるためです。 私の質問は、google.maps.event.trigger(map, 'resize')をどのように実装すればよいかということです。 この小さなコードの断片をどこに置けばいいのでしょうか？

ここに私のテストサイトがあります。 Google Mapボタンをクリックすると、手元の問題を確認できます。 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Reveal Modelスクリプトです。

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
       });
          });
 </script>

私のGoogle Map Scriptです。

<script type="text/javascript">
 function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(39.739318, -89.266507),
 zoom: 5,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
 mapOptions);
 }

 </script>

Google Mapを保持するdivです。

  <div id="myModal" class="reveal-modal large">
  <h2>How to get here</h2>
  <div id="map_canvas" style="width:600px; height:300px;"></div>
  <a class="close-reveal-modal">&#215;</a>
 </div>

アップデート 2018-05-22

Maps JavaScript API バージョン 3.32 の新しいレンダラーのリリースに伴い、resize イベントが Map クラスがあります。

ドキュメントには

地図のサイズを変更した場合、地図の中心は固定される

• フルスクリーンコントロールがセンターを保持するようになりました。

• 手動でリサイズイベントをトリガーする必要がなくなりました。

ソース https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); はバージョン 3.32 以降は効果がありません。

解決方法を教えてください。

実は、あなたのソースコードには、いくつかの問題がありました。

• は initialize() 関数は作成されますが、呼び出されることはありません
• は $(document).ready は、jQueryがロードされた後に呼び出される必要があります。
• は map は、（@Cristiano Fontes が言ったように）グローバル変数にする必要があり var map
• (重要) click イベントが呼び出されることはありません。2つのメソッドを組み合わせようとしている Zurbからの暴露 はダイアログを開くために提供しています（1つはJSで、もう1つはHTMLのみ）。JSのみのメソッドを使用する必要があります。
• 間違ったIDを使用している( #myModal1 がHTML内に配置されることはありません)。

そして、今度は ソリューションのダウンロード (次回はダウンロード/JSFiddleを提供してください。私たちが自分で作成する必要はありません)。

お役に立ったでしょうか？