Advanced Markers

AdvancedMarkerElement クラス

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

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

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

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

プロパティ
anchorLeft attr: anchor-left	タイプ: string optional デフォルト: "-50%" CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。 HTML 属性: anchor-left="string"
anchorTop attr: anchor-top	タイプ: string optional デフォルト: "-100%" CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。 HTML 属性: anchor-top="string"
collisionBehavior	タイプ: CollisionBehavior optional AdvancedMarkerElementOptions.collisionBehavior をご覧ください。
gmpClickable attr: gmp-clickable	タイプ: boolean optional AdvancedMarkerElementOptions.gmpClickable をご覧ください。 HTML 属性: gmp-clickable
gmpDraggable	タイプ: boolean optional AdvancedMarkerElementOptions.gmpDraggable をご覧ください。
map	タイプ: Map optional AdvancedMarkerElementOptions.map をご覧ください。
position attr: position	タイプ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElementOptions.position をご覧ください。 HTML 属性: position="lat,lng" position="lat,lng,altitude"
title attr: title	タイプ: string AdvancedMarkerElementOptions.title をご覧ください。 HTML 属性: title="string"
zIndex	タイプ: number optional AdvancedMarkerElementOptions.zIndex をご覧ください。
element readonly	非推奨: AdvancedMarkerElement を直接使用してください。 タイプ: HTMLElement このフィールドは読み取り専用です。ビューをサポートする DOM 要素。
content	非推奨: 代わりに .children を使用してください。 タイプ: Node optional AdvancedMarkerElementOptions.content をご覧ください。

メソッド
addListener	addListener(eventName, handler) パラメータ: eventName: string 観測されたイベント。 handler: イベントを処理する Function 関数。 戻り値: MapsEventListener 結果のイベント リスナー。 指定されたリスナー関数を、Maps Eventing システムの指定されたイベント名に追加します。
継承元: 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	function(event) 引数: event: AdvancedMarkerClickEvent このイベントは、AdvancedMarkerElement 要素がクリックされたときに発生します。addListener() ではなく addEventListener() と一緒に使用することをおすすめします。

AdvancedMarkerElementOptions インターフェース

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

AdvancedMarkerElement を作成するためのオプション。

プロパティ
anchorLeft 省略可	タイプ: string optional デフォルト: "-50%" CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
anchorTop 省略可	タイプ: string optional デフォルト: "-100%" CSS の長さ / パーセンテージ値。マーカーの左上隅からマーカーのアンカーポイントをオフセットするために使用されます。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
collisionBehavior 省略可	タイプ: CollisionBehavior optional AdvancedMarkerElement が別の AdvancedMarkerElement またはベクターマップ上の基本地図ラベルと重なった場合の動作を指定する列挙型。 注: AdvancedMarkerElement と AdvancedMarkerElement の衝突はラスター地図とベクター地図の両方で機能しますが、AdvancedMarkerElement と基本地図のラベルの衝突はベクター地図でのみ機能します。
content 省略可	タイプ: Node optional デフォルト: PinElement AdvancedMarkerElement のビジュアルをサポートする DOM 要素。 注: AdvancedMarkerElement は、渡された DOM 要素のクローンを作成しません。DOM 要素を AdvancedMarkerElement に渡した後、同じ DOM 要素を別の AdvancedMarkerElement に渡すと、DOM 要素が移動し、前の AdvancedMarkerElement が空のように見えます。
gmpClickable 省略可	タイプ: boolean optional デフォルト: false true の場合、AdvancedMarkerElement はクリック可能になり、gmp-click イベントをトリガーします。また、ユーザー補助の目的でインタラクティブに動作するようになります（矢印キーによるキーボード ナビゲーションが可能になるなど）。
gmpDraggable 省略可	タイプ: boolean optional デフォルト: false true の場合、AdvancedMarkerElement をドラッグできます。 注: 高度を含む AdvancedMarkerElement はドラッグできません。
map 省略可	タイプ: Map optional AdvancedMarkerElement を表示する地図。AdvancedMarkerElement を表示するには地図が必要です。作成時に指定されていない場合は、AdvancedMarkerElement.map を設定することで指定できます。
position 省略可	タイプ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElement の位置を設定します。AdvancedMarkerElement は位置情報なしで作成できますが、位置情報が提供されるまで（ユーザーの操作や選択などによって）表示されません。AdvancedMarkerElement の位置は、作成時に指定されていない場合は AdvancedMarkerElement.position を設定することで指定できます。 注: 高度を指定した AdvancedMarkerElement は、ベクターマップでのみサポートされます。
title 省略可	タイプ: string optional ロールオーバー テキスト。指定すると、ユーザー補助テキスト（スクリーン リーダーで使用する場合など）が、指定された値とともに AdvancedMarkerElement に追加されます。
zIndex 省略可	タイプ: number optional すべての AdvancedMarkerElement は、zIndex の順に地図上に表示されます。値が大きいほど、値が小さい AdvancedMarkerElement の前に表示されます。デフォルトでは、AdvancedMarkerElement は画面上の垂直方向の位置に従って表示され、下部の AdvancedMarkerElement は画面上部の AdvancedMarkerElement の前に表示されます。明示的な zIndex を持つマーカーと持たないマーカーを混在させると、予期しない視覚的な結果が生じる可能性があります。予測可能な動作を確保するには、すべてのマーカーに zIndex を設定するか、設定しないままにすることをおすすめします。zIndex は、CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY の高度なマーカー間の相対的な優先度を決定するためにも使用されます。zIndex の値が高いほど優先度が高くなります。

AdvancedMarkerClickEvent クラス

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

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

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

PinElement クラス

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

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

const {PinElement} = await google.maps.importLibrary("marker");

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

プロパティ
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 readonly	非推奨: PinElement を直接使用してください。 タイプ: HTMLElement このフィールドは読み取り専用です。ビューをサポートする DOM 要素。
glyph	非推奨: 代わりに PinElementOptions.glyphText または PinElementOptions.glyphSrc を使用してください。 タイプ: string|Element|URL optional PinElementOptions.glyph をご覧ください。

メソッド
継承元: addEventListener、 removeEventListener

PinElementOptions インターフェース

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

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

プロパティ
background 省略可	タイプ: string optional ピンの形状の背景色。任意の CSS カラー値をサポートします。
borderColor 省略可	タイプ: string optional ピンの形状の枠線の色。任意の CSS カラー値をサポートします。
glyph 省略可	非推奨: 代わりに PinElementOptions.glyphText または PinElementOptions.glyphSrc を使用してください。 タイプ: string|Element|URL optional ピンに表示される DOM 要素。
glyphColor 省略可	タイプ: string optional グリフの色。任意の CSS カラー値をサポートします。
glyphSrc 省略可	タイプ: URL|string optional ピンに表示されるグリフ画像のソース。
glyphText 省略可	タイプ: string optional ピンに表示されるテキスト。
scale 省略可	タイプ: number optional デフォルト: 1 ピンのスケール。