Advanced Markers

AdvancedMarkerElement クラス

google.maps.marker.AdvancedMarkerElement クラス

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

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

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

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

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

コンストラクタ
AdvancedMarkerElement	AdvancedMarkerElement([options]) パラメータ:  options:  AdvancedMarkerElementOptions optional 指定されたオプションで AdvancedMarkerElement を作成します。地図が指定されている場合、構築時に AdvancedMarkerElement が地図に追加されます。

プロパティ
collisionBehavior	タイプ:  CollisionBehavior optional AdvancedMarkerElementOptions.collisionBehavior をご覧ください。
gmpClickable	タイプ:  boolean optional AdvancedMarkerElementOptions.gmpClickable をご覧ください。 HTML 属性: <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
gmpDraggable	タイプ:  boolean optional AdvancedMarkerElementOptions.gmpDraggable をご覧ください。
map	タイプ:  Map optional AdvancedMarkerElementOptions.map をご覧ください。
position	タイプ:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 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 をご覧ください。
element	非推奨: AdvancedMarkerElement を直接使用します。 タイプ:  HTMLElement このフィールドは読み取り専用です。ビューをサポートする DOM 要素。
content	非推奨: 代わりに .children を使用してください。 タイプ:  Node optional AdvancedMarkerElementOptions.content をご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
addListener	addListener(eventName, handler) パラメータ:  eventName:  string 観測されたイベント。 handler:  Function イベントを処理する関数。 戻り値:  MapsEventListener 結果のイベント リスナー。 Maps Eventing システムの指定されたイベント名に、指定されたリスナー関数を追加します。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

イベント
click	function(event) 引数:  event:  MapMouseEvent このイベントは、AdvancedMarkerElement 要素がクリックされたときに発生します。 addEventListener() では使用できません（代わりに gmp-click を使用してください）。
drag	function(event) 引数:  event:  MapMouseEvent このイベントは、ユーザーが AdvancedMarkerElement をドラッグしている間、繰り返し発生します。 addEventListener() では使用できません。
dragend	function(event) 引数:  event:  MapMouseEvent このイベントは、ユーザーが AdvancedMarkerElement のドラッグを終了したときに発生します。 addEventListener() では使用できません。
dragstart	function(event) 引数:  event:  MapMouseEvent このイベントは、ユーザーが AdvancedMarkerElement のドラッグを開始したときに発生します。 addEventListener() では使用できません。
gmp-click	注意: v=beta チャンネルでのみ使用できます。 function(event) 引数:  event:  AdvancedMarkerClickEvent このイベントは、AdvancedMarkerElement 要素がクリックされたときに発生します。addEventListener()（addListener() ではなく）とともに使用するのが最適です。

AdvancedMarkerElementOptions インターフェース

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

AdvancedMarkerElement を構築するためのオプション。

プロパティ
collisionBehavior optional	タイプ:  CollisionBehavior optional 別の AdvancedMarkerElement またはベクターマップの基本地図ラベルと重なった場合の AdvancedMarkerElement の動作を指定する列挙型。 注: AdvancedMarkerElement と AdvancedMarkerElement の重なりはラスター地図とベクター地図の両方で機能しますが、AdvancedMarkerElement と基本地図のラベルの重なりはベクター地図でのみ機能します。
content optional	タイプ:  Node optional デフォルト: PinElement.element AdvancedMarkerElement のビジュアルをサポートする DOM 要素。 注: AdvancedMarkerElement は、渡された DOM 要素のクローンを作成しません。DOM 要素が AdvancedMarkerElement に渡されると、同じ DOM 要素を別の AdvancedMarkerElement に渡すと、DOM 要素が移動し、前の AdvancedMarkerElement が空に見えます。
gmpClickable optional	注意: v=beta チャンネルでのみ使用できます。 タイプ:  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	タイプ:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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 によって異なる場合があります。

注: Web コンポーネントとしての使用（HTMLElement サブクラスとしての使用や HTML 経由での使用など）はまだサポートされていません。

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

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

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

コンストラクタ
PinElement	PinElement([options]) パラメータ:  options:  PinElementOptions optional

プロパティ
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 をご覧ください。

メソッド
addEventListener	注意: v=beta チャンネルでのみ使用できます。 addEventListener(type, listener[, options]) パラメータ:  type:  string listener:  EventListener|EventListenerObject options:  boolean|AddEventListenerOptions optional 戻り値:  void この関数はまだ使用できません。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  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 ピンのスケール。