web-dev-qa-db-ja.com

google.maps.event.trigger（map、 'resize'）の使用方法

私はJSが初めてで、以前の質問への答えを見つけました。それは新しい質問をもたらし、それが再び私をここに連れてきました。

Google Map APIを含むReveal Modalがあります。ボタンをクリックすると、Reveal Modalがポップアップ表示され、Googleマップが表示されます。私の問題は、マップの3分の1しか表示されていないことです。これは、サイズ変更トリガーを実装する必要があるためです。私の質問は、google.maps.event.trigger（map、 'resize'）の実装方法です。この小さなコードスニペットはどこに配置しますか？

これが私のテストサイトです。 Googleマップボタンをクリックして、手元の問題を確認します。 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マップスクリプト：

_<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マップを保持する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>
_

UPDATE 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以降では効果がありません

javascripthtmlgoogle-mapszurb-foundation
15
Jeremy Flaugher

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

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

そして今： ソリューションをダウンロードする （次回ダウンロード/ JSFiddleを提供してください。これを自分で作成する必要はありません）。

お役に立てば幸いです！

20
MarcoK

ここに追加するだけです

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
  google.maps.event.trigger(map, 'resize');
       });
          });
 </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
     };
 --> map = new google.maps.Map(document.getElementById("map_canvas"),
   mapOptions);
 }

 </script>
11
Cristiano Fontes
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});
5
Mir Shakeel Hussain

最後の回答にコメントを残す方法が見つかりませんでしたが、クリスティアーノ・フォンテスの場合は+1が役立ちます！動いた。私の場合：

<script type="text/javascript">    

$('div.map-box').hide();
$('li.map').mouseover(function(){
    $('div.map-box').show();
    google.maps.event.trigger(map, 'resize');
});

</script>
3
Andrey Davis