Advanced Markers

AdvancedMarkerElement クラス

google.maps.marker.AdvancedMarkerElement クラス

地図上の位置を表示します。AdvancedMarkerElement を表示するには、position を設定する必要があります。

注: ウェブ コンポーネントとしての使用(カスタム <gmp-advanced-marker> HTML 要素の使用など)は、v=beta チャネルでのみ可能です。

カスタム要素:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

このクラスは HTMLElement を拡張します。

このクラスは AdvancedMarkerElementOptions を実装します。

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

AdvancedMarkerElement
AdvancedMarkerElement([options])
パラメータ: 
指定されたオプションで AdvancedMarkerElement を作成します。地図が指定されている場合、AdvancedMarkerElement は作成時に地図に追加されます。
collisionBehavior
タイプ:  CollisionBehavior optional
content
タイプ:  Node optional
AdvancedMarkerElementOptions.content をご覧ください。
element
タイプ:  HTMLElement
このフィールドは読み取り専用です。ビューをバッキングする DOM 要素。
BetagmpClickable
タイプ:  boolean optional
gmpDraggable
タイプ:  boolean optional
map
タイプ:  Map optional
AdvancedMarkerElementOptions.map をご覧ください。
position
AdvancedMarkerElementOptions.position をご覧ください。
HTML 属性:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
タイプ:  string
AdvancedMarkerElementOptions.title をご覧ください。
HTML 属性:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
タイプ:  number optional
AdvancedMarkerElementOptions.zIndex をご覧ください。
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベントタイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでは capturepassive のみがサポートされます。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
addListener
addListener(eventName, handler)
パラメータ: 
  • eventNamestring 検出されたイベント。
  • handler:  イベントを処理する Function 関数。
戻り値:  MapsEventListener 結果のイベント リスナー。
指定されたリスナー関数を、マップ イベント システムの指定されたイベント名に追加します。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
click
function(event)
引数: 
このイベントは、AdvancedMarkerElement 要素がクリックされたときに発生します。

addEventListener() では使用できません(代わりに gmp-click を使用してください)。
drag
function(event)
引数: 
このイベントは、ユーザーが AdvancedMarkerElement をドラッグしている間に繰り返し発生します。

addEventListener() ではご利用いただけません。
dragend
function(event)
引数: 
このイベントは、ユーザーが AdvancedMarkerElement のドラッグを停止したときに発生します。

addEventListener() ではご利用いただけません。
dragstart
function(event)
引数: 
このイベントは、ユーザーが AdvancedMarkerElement のドラッグを開始したときに発生します。

addEventListener() ではご利用いただけません。
Betagmp-click
function(event)
引数: 
このイベントは、AdvancedMarkerElement 要素がクリックされたときに発生します。addListener() ではなく addEventListener() で使用するのが最適です。

AdvancedMarkerElementOptions インターフェース

google.maps.marker.AdvancedMarkerElementOptions インターフェース

AdvancedMarkerElement の作成オプション。

collisionBehavior optional
タイプ:  CollisionBehavior optional
別の AdvancedMarkerElement またはベクターマップのベースマップラベルと重なった場合の AdvancedMarkerElement の動作を指定する列挙型。

: AdvancedMarkerElementAdvancedMarkerElement の衝突はラスター地図とベクター地図の両方で機能しますが、AdvancedMarkerElement と基本地図のラベルの衝突はベクター地図でのみ機能します。

content optional
タイプ:  Node optional
デフォルト: PinElement.element
AdvancedMarkerElement のビジュアルをバッキングする DOM 要素。

: AdvancedMarkerElement は、渡された DOM 要素のクローンを作成しません。DOM 要素が AdvancedMarkerElement に渡されると、同じ DOM 要素を別の AdvancedMarkerElement に渡すと、DOM 要素が移動し、前の AdvancedMarkerElement が空っぽに見えます。

BetagmpClickable optional
タイプ:  boolean optional
デフォルト: false
true の場合、AdvancedMarkerElement はクリック可能になり gmp-click イベントがトリガーされ、ユーザー補助の目的でインタラクティブに動作するようになります(矢印キーによるキーボード操作を許可するなど)。
gmpDraggable optional
タイプ:  boolean optional
デフォルト: false
true の場合、AdvancedMarkerElement をドラッグできます。

: 高度を含む AdvancedMarkerElement はドラッグできません。

map optional
タイプ:  Map optional
AdvancedMarkerElement を表示する地図。AdvancedMarkerElement を表示するには地図が必要です。作成時に指定しなかった場合は、AdvancedMarkerElement.map を設定することで指定できます。
position optional
AdvancedMarkerElement の位置を設定します。AdvancedMarkerElement は位置なしで作成できますが、ユーザーの操作や選択などによって位置が指定されるまで表示されません。AdvancedMarkerElement の位置は、コンストラクション時に指定しなかった場合は、AdvancedMarkerElement.position を設定することで指定できます。

: 高度を指定した AdvancedMarkerElement は、ベクターマップでのみサポートされています。

title optional
タイプ:  string optional
ロールオーバー テキスト。指定した場合、ユーザー補助テキスト(スクリーン リーダーで使用)が指定された値とともに AdvancedMarkerElement に追加されます。
zIndex optional
タイプ:  number optional
すべての AdvancedMarkerElement は、zIndex の順序で地図上に表示されます。値が大きい AdvancedMarkerElement は、値が小さい AdvancedMarkerElement の前に表示されます。デフォルトでは、AdvancedMarkerElement は画面上の垂直位置に従って表示され、画面上部の AdvancedMarkerElement の前に下部の AdvancedMarkerElement が表示されます。zIndex は、CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 高度なマーカー間の相対的な優先度を決定するためにも使用されます。zIndex の値が高いほど優先度が高くなります。

AdvancedMarkerClickEvent クラス

google.maps.marker.AdvancedMarkerClickEvent クラス

このイベントは、高度なマーカーのクリックから作成されます。event.target.position を使用してマーカーの位置にアクセスします。

このクラスは Event を拡張します。

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

PinElement クラス

google.maps.marker.PinElement クラス

PinElement は、シェイプとグリフで構成される DOM 要素を表します。このシェイプは、デフォルトの AdvancedMarkerElement と同じバルーン スタイルです。グリフは、バルーン形状で表示されるオプションの DOM 要素です。PinElement のアスペクト比は、PinElement.scale によって異なる場合があります。

注: ウェブ コンポーネントとしての使用(HTMLElement サブクラスとしての使用、HTML 経由の使用など)はまだサポートされていません。

このクラスは HTMLElement を拡張します。

このクラスは PinElementOptions を実装します。

const {PinElement} = await google.maps.importLibrary("marker") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

PinElement
PinElement([options])
パラメータ: 
background
タイプ:  string optional
PinElementOptions.background をご覧ください。
borderColor
タイプ:  string optional
PinElementOptions.borderColor をご覧ください。
element
タイプ:  HTMLElement
このフィールドは読み取り専用です。ビューをバッキングする DOM 要素。
glyph
タイプ:  string|Element|URL optional
PinElementOptions.glyph をご覧ください。
glyphColor
タイプ:  string optional
PinElementOptions.glyphColor をご覧ください。
scale
タイプ:  number optional
PinElementOptions.scale をご覧ください。
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
この機能はまだご利用いただけません。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PinElementOptions インターフェース

google.maps.marker.PinElementOptions インターフェース

PinElement を作成するオプション。

background optional
タイプ:  string optional
ピンの形状の背景色。任意の CSS 色値をサポートします。
borderColor optional
タイプ:  string optional
ピンの形状の枠線の色。任意の CSS 色値をサポートします。
glyph optional
タイプ:  string|Element|URL optional
ピンに表示される DOM 要素。
glyphColor optional
タイプ:  string optional
グリフの色。任意の CSS 色値をサポートします。
scale optional
タイプ:  number optional
デフォルト: 1
ピンのスケール。