JavaScript を使用して Google マップのサイズを動的に変更するにはどうすればよいですか?

JavaScript を使用して Google マップのサイズを動的に変更する

Google マップ要素のサイズを動的に変更する場合、地図のサイズを確実に変更するためにサイズ変更イベントをトリガーすることが重要です。新しい寸法に調整されます。

Google Maps v3 の場合

<code class="javascript">google.maps.event.trigger(map, "resize");</code>

Google Maps API の場合

Google マップの場合API では、次の JavaScript コードを使用してサイズ変更イベントをトリガーできます:

<code class="javascript">function resizeMap() {
  google.maps.event.trigger(map, "resize");
}</code>

その後、resizeMap() を呼び出して、コンテナーの更新された寸法に合わせてマップを調整できます。

追加メモ:

• 新しい寸法が設定された後にサイズ変更イベントをトリガーする必要があります。
• ウィンドウ サイズ変更リスナーを使用すると、マップが確実に変更に応答できるようになります。ブラウザ ウィンドウのサイズ。

例:

<code class="html"><script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-container">
  <div id="map"></div>
</div>
<script>
  function resizeMap() {
    google.maps.event.trigger(map, "resize");
  }
  $(window).resize(resizeMap);

  var map = new google.maps.Map(document.getElementById("map"), {});
</script></code>

次の手順に従うことで、コンテナ内の変更に合わせて Google マップが動的に調整されるようにすることができます。サイズ。

以上がJavaScript を使用して Google マップのサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。