Google マップの InfoWindows をどのようにスタイル設定できますか?

Google マップ InfoWindows のスタイル設定

Google マップ InfoWindows の外観のカスタマイズは、ドキュメントが限られているため、難しい場合があります。ただし、目的のスタイルを実現するために使用できるさまざまなメソッドがあります。

InfoBubble の使用

InfoWindow と比較して柔軟性を高めるには、InfoBubble クラスの使用を検討してください。参照ファイルをインポートすると、そのカスタマイズ可能な属性を通じて高度なスタイル オプションにアクセスできます。例:

<code class="javascript">infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  ...  // Custom styling options
});</code>

GOverlay の拡張

情報ウィンドウの外観をさらに制御するには、GOverlay クラスを拡張します。このアプローチでは、地図上にカスタム div を描画し、その位置、サイズ、スタイルを定義できます。 InfoWindow 拡張機能の例を次に示します。

<code class="javascript">function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  ...  // Initialize properties

  // Override methods
  InfoBox.prototype = new google.maps.OverlayView();
  // Implement createElement, draw, remove, and panMap methods
}</code>

InfoWindow 要素の変更

もう 1 つのオプションは、JavaScript または jQuery を使用して InfoWindow の要素を直接変更することです。必要な要素にアクセスし、スタイルを適用します。

<code class="javascript">var infowindow = new google.maps.InfoWindow();
$('#content').attr('style', 'background-color: #000');</code>

このアプローチでは、InfoBubble を使用したり、GOverlay を拡張したりするよりも制御性が低くなりますが、スタイルの小さな変更であればより簡単に行うことができます。

以上がGoogle マップの InfoWindows をどのようにスタイル設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。