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 要素。 |
gmpClickable |
タイプ:
boolean optional |
gmpDraggable |
タイプ:
boolean optional |
map |
タイプ:
Map optional AdvancedMarkerElementOptions.map をご覧ください。 |
position |
タイプ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional HTML 属性:
|
title |
タイプ:
string AdvancedMarkerElementOptions.title をご覧ください。HTML 属性:
|
zIndex |
タイプ:
number optional AdvancedMarkerElementOptions.zIndex をご覧ください。 |
メソッド | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
addListener |
addListener(eventName, handler) パラメータ:
戻り値:
MapsEventListener 結果のイベント リスナー。指定されたリスナー関数を、マップ イベント システムの指定されたイベント名に追加します。 |
removeEventListener |
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void 以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
イベント | |
---|---|
click |
function(event) 引数:
このイベントは、 AdvancedMarkerElement 要素がクリックされたときに発生します。addEventListener() では使用できません(代わりに gmp-click を使用してください)。 |
drag |
function(event) 引数:
|
dragend |
function(event) 引数:
|
dragstart |
function(event) 引数:
|
gmp-click |
function(event) 引数:
|
AdvancedMarkerElementOptions インターフェース
google.maps.marker.AdvancedMarkerElementOptions
インターフェース
AdvancedMarkerElement
の作成オプション。
プロパティ | |
---|---|
collisionBehavior optional |
タイプ:
CollisionBehavior optional 別の AdvancedMarkerElement またはベクターマップのベースマップラベルと重なった場合の AdvancedMarkerElement の動作を指定する列挙型。注: |
content optional |
タイプ:
Node optional デフォルト:
PinElement.element AdvancedMarkerElement のビジュアルをバッキングする DOM 要素。注: |
gmpClickable optional |
タイプ:
boolean optional デフォルト:
false true の場合、AdvancedMarkerElement はクリック可能になり gmp-click イベントがトリガーされ、ユーザー補助の目的でインタラクティブに動作するようになります(矢印キーによるキーボード操作を許可するなど)。 |
gmpDraggable optional |
タイプ:
boolean optional デフォルト:
false true の場合、AdvancedMarkerElement をドラッグできます。注: 高度を含む |
map optional |
タイプ:
Map optional AdvancedMarkerElement を表示する地図。AdvancedMarkerElement を表示するには地図が必要です。作成時に指定しなかった場合は、AdvancedMarkerElement.map を設定することで指定できます。 |
position optional |
タイプ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElement の位置を設定します。AdvancedMarkerElement は位置なしで作成できますが、ユーザーの操作や選択などによって位置が指定されるまで表示されません。AdvancedMarkerElement の位置は、コンストラクション時に指定しなかった場合は、AdvancedMarkerElement.position を設定することで指定できます。注: 高度を指定した |
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 |
PinElementOptions.glyph をご覧ください。 |
glyphColor |
タイプ:
string optional PinElementOptions.glyphColor をご覧ください。 |
scale |
タイプ:
number optional PinElementOptions.scale をご覧ください。 |
メソッド | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void この機能はまだご利用いただけません。 |
removeEventListener |
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 |
ピンに表示される DOM 要素。 |
glyphColor optional |
タイプ:
string optional グリフの色。任意の CSS 色値をサポートします。 |
scale optional |
タイプ:
number optional デフォルト:
1 ピンのスケール。 |