Advanced Markers

AdvancedMarkerElement クラス

google.maps.marker.AdvancedMarkerElement クラス

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

カスタム要素:
<gmp-advanced-marker anchor-left="string" anchor-top="string" 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])
パラメータ: 
指定されたオプションを使用して AdvancedMarkerElement を作成します。地図が指定されている場合、AdvancedMarkerElement は作成時に地図に追加されます。
anchorLeft
タイプ:  string optional
デフォルト: "-50%"
CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
HTML 属性:
  • <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop
タイプ:  string optional
デフォルト: "-100%"
CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
HTML 属性:
  • <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
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
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
タイプ:  HTMLElement
このフィールドは読み取り専用です。ビューをサポートする DOM 要素。
content
タイプ:  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)
引数: 
このイベントは、AdvancedMarkerElement 要素がクリックされたときに発生します。

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

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

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

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

AdvancedMarkerElementOptions インターフェース

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

AdvancedMarkerElement を作成するためのオプション。
anchorLeft optional
タイプ:  string optional
デフォルト: "-50%"
CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
anchorTop optional
タイプ:  string optional
デフォルト: "-100%"
CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
collisionBehavior optional
タイプ:  CollisionBehavior optional
AdvancedMarkerElement が別の AdvancedMarkerElement またはベクターマップ上の基本地図ラベルと重なった場合の動作を指定する列挙型。

注: AdvancedMarkerElement と AdvancedMarkerElement の衝突はラスター地図とベクター地図の両方で機能しますが、AdvancedMarkerElement と基本地図のラベルの衝突はベクター地図でのみ機能します。
content optional
タイプ:  Node optional
デフォルト: PinElement
AdvancedMarkerElement のビジュアルをサポートする DOM 要素。

注: AdvancedMarkerElement は、渡された DOM 要素のクローンを作成しません。DOM 要素を AdvancedMarkerElement に渡した後、同じ DOM 要素を別の AdvancedMarkerElement に渡すと、DOM 要素が移動し、前の AdvancedMarkerElement が空のように見えます。
gmpClickable 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 の前に表示されます。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 または Marker3DElement と同じです。グリフは、バルーン形状で表示されるオプションの DOM 要素です。PinElement のアスペクト比は、PinElement.scale によって異なる場合があります。

このクラスは 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 をご覧ください。
glyphColor
タイプ:  string optional
PinElementOptions.glyphColor をご覧ください。
glyphSrc
タイプ:  URL|string optional
PinElementOptions.glyphSrc をご覧ください。
glyphText
タイプ:  string optional
PinElementOptions.glyphText をご覧ください。
scale
タイプ:  number optional
PinElementOptions.scale をご覧ください。
element
タイプ:  HTMLElement
このフィールドは読み取り専用です。ビューをサポートする DOM 要素。
glyph
タイプ:  string|Element|URL optional
PinElementOptions.glyph をご覧ください。
addEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す文字列（大文字と小文字を区別）。
  • listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは関数、または handleEvent メソッドを持つオブジェクトである必要があります
  • options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントは capture と passive のみをサポートしています。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
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 カラー値をサポートします。
glyphSrc optional
タイプ:  URL|string optional
ピンに表示されるグリフ画像のソース。
glyphText optional
タイプ:  string optional
ピンに表示されるテキスト。
scale optional
タイプ:  number optional
デフォルト: 1
ピンのスケール。