Google マップの情報ウィンドウのプレゼンテーションをカスタマイズするにはどうすればよいですか?

Google マップの情報ウィンドウ プレゼンテーションのカスタマイズ

Google マップでの情報ウィンドウのスタイル設定は、ドキュメントが限られているため、困難が生じる場合があります。幸いなことに、目的のカスタマイズを実現するためのさまざまなアプローチが存在します。

InfoBubble クラス

Google は、InfoWindow の代替として InfoBubble クラスを提供しています。 InfoBubble は高度なスタイル設定が可能で、backgroundColor、borderRadius、arrowStyle などのプロパティを通じて外観をカスタマイズできます。以下に例を示します。

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10
});

infoBubble.open();

情報ウィンドウ カスタム (OverlayView)

もう 1 つのアプローチは、Google Maps API の GOverlay クラスを拡張し、それをベースとして使用することです。カスタマイズされた情報ウィンドウ。このメソッドは柔軟性が高く、createElement、draw、panMap などのメソッドを実装する必要があります。

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  ...
}

InfoBox.prototype = new google.maps.OverlayView();

このアプローチを使用して完全に機能するカスタム情報ウィンドウを作成するには、必要なメソッドをオーバーライドする必要があることに注意してください。

JavaScript を使用した情報ウィンドウ要素の変更

JavaScript (または jQuery) を使用して、情報ウィンドウの要素を動的に変更することもできます。情報ウィンドウ内の要素を操作することで、ある程度のカスタマイズを実現できます。

以上がGoogle マップの情報ウィンドウのプレゼンテーションをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。