Web アプリケーションで Google マップのサイズを動的に変更するにはどうすればよいですか?

Google マップの動的サイズ変更

Web アプリケーションでは、Google マップのロード後に Google マップのサイズを変更する必要がある場合があります。 。マップ コンテナの div のサイズを変更すると、端近くのタイルが歪んで消えてしまう可能性があるため、通常は不十分です。

Google マップ v3 のソリューション

Google マップのサイズを適切に変更するにはバージョン 3 では、「サイズ変更」イベントを明示的にトリガーする必要があります。

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

このアプローチにより、Google マップは内部計算を調整し、コンテナ div の新しい寸法に一致するように地図表示を更新します。

jQuery の使用例

次の JavaScript コードは、「resize」イベント トリガーを使用して Google マップのサイズを変更する方法を示しています。

$(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 window resize events and trigger map resizing
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

この例ではたとえば、マップが作成され、そのサイズ変更動作は jQuery イベント処理を使用して処理されます。ウィンドウ サイズが変更されると、地図上で「サイズ変更」イベントがトリガーされ、表示が強制的に調整されます。

「サイズ変更」イベントをトリガーすることで、Google マップが新しいサイズに確実に適応できるようになります。コンテナ div を管理し、ウィンドウやコンテナの寸法の変更に関係なく、シームレスなユーザー エクスペリエンスを提供します。

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