JavaScript を使用した Google マップのサイズ変更

Google マップを含む「mapwrap」div のサイズを変更すると、Google タイルが消えるという問題が発生しました。地図。この記事は、Google マップの調整をトリガーする適切な関数について説明することで、この問題の解決策を提供することを目的としています。

タイルが消えるのはなぜですか?

サイズを変更すると、「 「mapwrap」div を編集すると、Google マップは新しいサイズに自動的に調整されません。これにより、マップの寸法と表示領域が不一致になり、タイルが表示されなくなります。

解決策

これを修正するには、サイズ変更イベントを明示的にトリガーする必要があります。 Google マップ オブジェクト上。これにより、マップがレイアウトを再計算し、「mapwrap」 div の新しい寸法に調整するように指示されます。

Google マップ v3 の場合は、次の関数を使用します:

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

デモ

この概念を明確にするために、jQuery を使用したデモを次に示します。

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

この例では、ウィンドウのサイズが変更されるたびに、「map-canvas」div 内の Google マップが新しいサイズに自動的に調整され、タイルが消えるのを防ぎます。