Google Maps InfoWindows のスタイルをカスタマイズするにはどうすればよいですか?

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

Google マップでは、InfoWindows のスタイル設定に関する限定的なガイドを提供しています。この記事では、これらの要素をカスタマイズする手法について説明します。

InfoBubble

InfoWindow の代替となる InfoBubble を使用すると、多くのスタイル オプションを実現できます。

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 30,
  backgroundClassName: 'transparent',
  arrowStyle: 2
});
infoBubble.open();

情報ウィンドウ カスタム

このスクリプトは GOverlay を拡張し、より柔軟でカスタマイズ可能な情報ウィンドウを作成します。

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

情報ウィンドウ カスタムを使用する場合は、複数のメソッドをオーバーライドする必要がある場合があることに注意してください。

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