Draw on the map

Marker3DElement クラス

google.maps.maps3d.Marker3DElement クラス

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

カスタム要素:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

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

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

const {Marker3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Marker3DElement
Marker3DElement([options])
パラメータ: 
指定されたオプションを使用して Marker3DElement を作成します。
altitudeMode
タイプ:  AltitudeMode optional
デフォルト: AltitudeMode.CLAMP_TO_GROUND
位置の高度コンポーネントの解釈方法を指定します。
HTML 属性:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
タイプ:  CollisionBehavior optional
デフォルト: CollisionBehavior.REQUIRED
Marker3DElement が別の Marker3DElement またはベースマップ ラベルと衝突した場合の動作を指定する列挙型。
HTML 属性:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
タイプ:  boolean optional
デフォルト: false
このマーカーが遮られたときに描画するかどうかを指定します。マーカーは、地図のジオメトリ（建物など）によって遮られることがあります。
HTML 属性:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
タイプ:  boolean optional
デフォルト: false
マーカーを地面に接続するかどうかを指定します。マーカーを押し出すには、altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。
HTML 属性:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
タイプ:  string optional
このマーカーによって表示されるテキスト。
HTML 属性:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
マーカーの先端の位置。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
タイプ:  boolean optional
デフォルト: false
このマーカーがカメラからの距離に関係なくサイズを維持するかどうかを指定します。デフォルトでは、マーカーはカメラからの距離 / 傾きに基づいてスケーリングされます。
HTML 属性:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
タイプ:  number optional
他のマーカーと比較した zIndex。
HTML 属性:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Marker3DElement に直接追加されたカスタム要素はスロットされますが、マーカーの描画に使用されるのは HTMLImageElement、SVGElement、PinElement タイプの要素のみで、他の要素は無視されます。
HTMLImageElement と SVGElement は、Marker3DElement のデフォルト スロットに割り当てる前に、<template> 要素でラップする必要があります。

画像と SVG は、3D シーンでレンダリングされる前にラスタライズされるため、SVG に埋め込まれたカスタム HTML や画像に追加された CSS クラスは適用されず、画面にマーカーが表示されるときに反映されない可能性があります。
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 をご覧ください。

Marker3DElementOptions インターフェース

google.maps.maps3d.Marker3DElementOptions インターフェース

Marker3DElementOptions オブジェクト。Marker3DElement に設定できるプロパティを定義するために使用されます。
altitudeMode optional
タイプ:  AltitudeMode optional
Marker3DElement.altitudeMode をご覧ください。
collisionBehavior optional
タイプ:  CollisionBehavior optional
Marker3DElement.collisionBehavior をご覧ください。
drawsWhenOccluded optional
タイプ:  boolean optional
Marker3DElement.drawsWhenOccluded をご覧ください。
extruded optional
タイプ:  boolean optional
Marker3DElement.extruded をご覧ください。
label optional
タイプ:  string optional
Marker3DElement.label をご覧ください。
position optional
Marker3DElement.position をご覧ください。
sizePreserved optional
タイプ:  boolean optional
Marker3DElement.sizePreserved をご覧ください。
zIndex optional
タイプ:  number optional
Marker3DElement.zIndex をご覧ください。

Marker3DInteractiveElement クラス

google.maps.maps3d.Marker3DInteractiveElement クラス

3D 地図上に位置を表示します。Marker3DInteractiveElement を表示するには、position を設定する必要があります。Marker3DElement とは異なり、Marker3DInteractiveElement は gmp-click イベントを受け取ります。

カスタム要素:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

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

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

const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
パラメータ: 
指定されたオプションを使用して Marker3DInteractiveElement を作成します。
gmpPopoverTargetElement
タイプ:  PopoverElement optional
設定すると、このマーカーをクリックしたときにポップオーバー要素が開きます。
HTML 属性:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
タイプ:  string
ロールオーバー テキスト。指定すると、ユーザー補助テキスト（スクリーン リーダーで使用する場合など）が、指定された値とともに Marker3DInteractiveElement に追加されます。
HTML 属性:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
継承: altitudeMode、 collisionBehavior、 drawsWhenOccluded、 extruded、 label、 position、 sizePreserved、 zIndex
default
Marker3DInteractiveElement に直接追加されたカスタム要素はスロットされますが、マーカーの描画に使用されるのは PinElement タイプの要素のみで、他の要素は無視されます。
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 をご覧ください。
gmp-click
function(clickEvent)
引数: 
このイベントは、Marker3DInteractiveElement 要素がクリックされたときに発生します。

Marker3DInteractiveElementOptions インターフェース

google.maps.maps3d.Marker3DInteractiveElementOptions インターフェース

Marker3DInteractiveElementOptions オブジェクト。Marker3DInteractiveElement に設定できるプロパティを定義するために使用されます。

このインターフェースは Marker3DElementOptions を拡張します。
gmpPopoverTargetElement optional
タイプ:  PopoverElement optional
Marker3DInteractiveElement.gmpPopoverTargetElement をご覧ください。
title optional
タイプ:  string optional
Marker3DInteractiveElement.title をご覧ください。
継承: altitudeMode、 collisionBehavior、 drawsWhenOccluded、 extruded、 label、 position、 sizePreserved、 zIndex

Model3DElement クラス

google.maps.maps3d.Model3DElement クラス

gLTF モデルのレンダリングを可能にする 3D モデル。Model3DElement を表示するには、position と src を設定する必要があります。

gLTF PBR の主要プロパティに対応させる必要があります。現在、拡張機能や拡張プロパティは利用できません。

カスタム要素:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

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

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

const {Model3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Model3DElement
Model3DElement([options])
パラメータ: 
指定されたオプションを使用して Model3DElement を作成します。
altitudeMode
タイプ:  AltitudeMode optional
デフォルト: AltitudeMode.CLAMP_TO_GROUND
位置の高度の解釈方法を指定します。
HTML 属性:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
タイプ:  Orientation3D|Orientation3DLiteral optional
3D モデルの座標系の回転を記述して、3D 地図上にモデルを配置します。

回転は、ロール、チルト、ヘディングの順にモデルに適用されます。
HTML 属性:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Model3DElement の位置を設定します。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
タイプ:  number|Vector3D|Vector3DLiteral optional
デフォルト: 1
モデルの座標空間で、X 軸、Y 軸、Z 軸に沿ってモデルをスケーリングします。
HTML 属性:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
タイプ:  string|URL optional
3D モデルの URL を指定します。現時点では、.glb 形式のモデルのみがサポートされています。

相対 HTTP URL は、対応する絶対 URL に解決されます。

.glb モデルファイルをメイン アプリケーションとは異なるウェブサイトまたはサーバーでホストしている場合は、正しい CORS HTTP ヘッダーを設定してください。これにより、アプリケーションは他のドメインのモデルファイルに安全にアクセスできます。
HTML 属性:
  • <gmp-model-3d src="url"></gmp-model-3d>
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 をご覧ください。

Model3DElementOptions インターフェース

google.maps.maps3d.Model3DElementOptions インターフェース

Model3DElement に設定できるプロパティを定義するために使用される Model3DElementOptions オブジェクト。
altitudeMode optional
タイプ:  AltitudeMode optional
Model3DElement.altitudeMode をご覧ください。
orientation optional
タイプ:  Orientation3D|Orientation3DLiteral optional
Model3DElement.orientation をご覧ください。
position optional
Model3DElement.position をご覧ください。
scale optional
タイプ:  number|Vector3D|Vector3DLiteral optional
Model3DElement.scale をご覧ください。
src optional
タイプ:  string|URL optional
Model3DElement.src をご覧ください。

Model3DInteractiveElement クラス

google.maps.maps3d.Model3DInteractiveElement クラス

gLTF モデルのレンダリングを可能にする 3D モデル。Model3DElement を表示するには、position と src を設定する必要があります。

gLTF PBR の主要プロパティに対応させる必要があります。現在、拡張機能や拡張プロパティは利用できません。

Model3DElement とは異なり、Model3DInteractiveElement は gmp-click イベントを受け取ります。

カスタム要素:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

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

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

const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Model3DInteractiveElement
Model3DInteractiveElement([options])
パラメータ: 
指定されたオプションで Model3DInteractiveElement を作成します。
継承元: altitudeMode、 orientation、 position、 scale、 src
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 をご覧ください。
gmp-click
function(clickEvent)
引数: 
このイベントは、Model3DInteractiveElement 要素がクリックされたときに発生します。

Model3DInteractiveElementOptions インターフェース

google.maps.maps3d.Model3DInteractiveElementOptions インターフェース

Model3DInteractiveElement に設定できるプロパティを定義するために使用される Model3DInteractiveElementOptions オブジェクト。

このインターフェースは Model3DElementOptions を拡張します。
継承元: altitudeMode、 orientation、 position、 scale、 src

Polyline3DElement クラス

google.maps.maps3d.Polyline3DElement クラス

3D ポリラインは、3D 地図上で連結された一連のラインからなる線形オーバーレイです。

カスタム要素:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

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

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

const {Polyline3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Polyline3DElement
Polyline3DElement([options])
パラメータ: 
指定されたオプションを使用して Polyline3DElement を作成します。
altitudeMode
タイプ:  AltitudeMode optional
デフォルト: AltitudeMode.CLAMP_TO_GROUND
座標の高度コンポーネントの解釈方法を指定します。
HTML 属性:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
drawsOccludedSegments
タイプ:  boolean optional
デフォルト: false
遮られる可能性のあるポリラインの部分を描画するかどうかを指定します。ポリラインは、地図のジオメトリ（建物など）によって遮られることがあります。
HTML 属性:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
タイプ:  boolean optional
デフォルト: false
ポリラインを地面に接続するかどうかを指定します。ポリラインを押し出すには、altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。
HTML 属性:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
タイプ:  boolean optional
デフォルト: false
true の場合、ポリラインのエッジは測地線として解釈され、地球の曲率に沿って描画されます。false の場合、ポリラインのエッジは画面空間で直線としてレンダリングされます。
HTML 属性:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
タイプ:  string optional
外側の色。すべての CSS3 色に対応します。
HTML 属性:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
タイプ:  number optional
外側の幅は 0.0～1.0 です。これは strokeWidth の割合です。
HTML 属性:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
ポリラインの座標の順序付けされたシーケンス。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
タイプ:  string optional
ストロークの色。すべての CSS3 色に対応します。
HTML 属性:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
タイプ:  number optional
ピクセル単位のストローク幅。
HTML 属性:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
タイプ:  number optional
その他のポリラインと比較した zIndex。
HTML 属性:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
ポリラインの座標の順序付けされたシーケンス。高度は特定のモードでは無視されるため、省略可能です。
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 をご覧ください。

Polyline3DElementOptions インターフェース

google.maps.maps3d.Polyline3DElementOptions インターフェース

Polyline3DElement に設定できるプロパティを定義するために使用される Polyline3DElementOptions オブジェクト。
altitudeMode optional
タイプ:  AltitudeMode optional
Polyline3DElement.altitudeMode をご覧ください。
coordinates optional
Polyline3DElement.coordinates をご覧ください。
drawsOccludedSegments optional
タイプ:  boolean optional
Polyline3DElement.drawsOccludedSegments をご覧ください。
extruded optional
タイプ:  boolean optional
Polyline3DElement.extruded をご覧ください。
geodesic optional
タイプ:  boolean optional
Polyline3DElement.geodesic をご覧ください。
outerColor optional
タイプ:  string optional
Polyline3DElement.outerColor をご覧ください。
outerWidth optional
タイプ:  number optional
Polyline3DElement.outerWidth をご覧ください。
strokeColor optional
タイプ:  string optional
Polyline3DElement.strokeColor をご覧ください。
strokeWidth optional
タイプ:  number optional
Polyline3DElement.strokeWidth をご覧ください。
zIndex optional
タイプ:  number optional
Polyline3DElement.zIndex をご覧ください。

Polyline3DInteractiveElement クラス

google.maps.maps3d.Polyline3DInteractiveElement クラス

3D ポリラインは、3D 地図上で連結された一連の線分からなる線形オーバーレイです。Polyline3DElement とは異なり、Polyline3DInteractiveElement は gmp-click イベントを受け取ります。

カスタム要素:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

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

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

const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
パラメータ: 
指定されたオプションで Polyline3DInteractiveElement を作成します。
継承: altitudeMode、 drawsOccludedSegments、 extruded、 geodesic、 outerColor、 outerWidth、 path、 strokeColor、 strokeWidth、 zIndex、 coordinates
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 をご覧ください。
gmp-click
function(clickEvent)
引数: 
  • clickEvent:  LocationClickEvent イベント オブジェクトには、クリックされた場所の緯度、経度、高度が含まれます。
このイベントは、Polyline3DInteractiveElement 要素がクリックされたときに発生します。

Polyline3DInteractiveElementOptions インターフェース

google.maps.maps3d.Polyline3DInteractiveElementOptions インターフェース

Polyline3DInteractiveElement に設定できるプロパティを定義するために使用される Polyline3DInteractiveElementOptions オブジェクト。

このインターフェースは Polyline3DElementOptions を拡張します。
継承: altitudeMode、 coordinates、 drawsOccludedSegments、 extruded、 geodesic、 outerColor、 outerWidth、 strokeColor、 strokeWidth、 zIndex

Polygon3DElement クラス

google.maps.maps3d.Polygon3DElement クラス

3D ポリゴン（3D ポリラインなど）は、一連の接続された座標を順序付けされたシーケンスで定義します。また、ポリゴンは閉じたループを形成し、塗りつぶされた領域を定義します。

カスタム要素:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

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

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

const {Polygon3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Polygon3DElement
Polygon3DElement([options])
パラメータ: 
指定されたオプションを使用して Polygon3DElement を作成します。
altitudeMode
タイプ:  AltitudeMode optional
デフォルト: AltitudeMode.CLAMP_TO_GROUND
座標の高度コンポーネントの解釈方法を指定します。
HTML 属性:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
タイプ:  boolean optional
デフォルト: false
遮られる可能性のあるポリゴンの部分を描画するかどうかを指定します。ポリゴンは、地図のジオメトリ（建物など）によって遮られることがあります。
HTML 属性:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
タイプ:  boolean optional
デフォルト: false
ポリゴンを地面に接続するかどうかを指定します。ポリゴンを押し出すには、altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。
HTML 属性:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
タイプ:  string optional
塗りつぶしの色。すべての CSS3 色に対応します。
HTML 属性:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
タイプ:  boolean optional
デフォルト: false
true の場合、ポリゴンのエッジは測地線として解釈され、地球の曲率に従います。false の場合、ポリゴンのエッジは画面スペースに直線としてレンダリングされます。
HTML 属性:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
閉ループを指定する座標の順序付きシーケンス。ポリラインとは異なり、ポリゴンは 1 つ以上のパスで構成され、ポリゴンの内部に複数の切り抜きを作成できます。
path
閉ループを指定する座標の順序付きシーケンス。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
タイプ:  string optional
ストロークの色。すべての CSS3 色に対応します。
HTML 属性:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
タイプ:  number optional
ピクセル単位のストローク幅。
HTML 属性:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
タイプ:  number optional
その他のポリラインと比較した zIndex。
HTML 属性:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
outerCoordinates
閉ループを指定する座標の順序付きシーケンス。高度は特定のモードでは無視されるため、省略可能です。
innerCoordinates
閉ループを指定する座標の順序付きシーケンス。ポリラインとは異なり、ポリゴンは 1 つ以上のパスで構成され、ポリゴンの内部に複数の切り抜きを作成できます。
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 をご覧ください。

Polygon3DElementOptions インターフェース

google.maps.maps3d.Polygon3DElementOptions インターフェース

Polygon3DElement に設定できるプロパティを定義するために使用される Polygon3DElementOptions オブジェクト。
altitudeMode optional
タイプ:  AltitudeMode optional
Polygon3DElement.altitudeMode をご覧ください。
drawsOccludedSegments optional
タイプ:  boolean optional
Polygon3DElement.drawsOccludedSegments をご覧ください。
extruded optional
タイプ:  boolean optional
Polygon3DElement.extruded をご覧ください。
fillColor optional
タイプ:  string optional
Polygon3DElement.fillColor をご覧ください。
geodesic optional
タイプ:  boolean optional
Polygon3DElement.geodesic をご覧ください。
innerCoordinates optional
Polygon3DElement.innerCoordinates をご覧ください。
outerCoordinates optional
Polygon3DElement.outerCoordinates をご覧ください。
strokeColor optional
タイプ:  string optional
Polygon3DElement.strokeColor をご覧ください。
strokeWidth optional
タイプ:  number optional
Polygon3DElement.strokeWidth をご覧ください。
zIndex optional
タイプ:  number optional
Polygon3DElement.zIndex をご覧ください。

Polygon3DInteractiveElement クラス

google.maps.maps3d.Polygon3DInteractiveElement クラス

3D ポリゴン（3D ポリラインなど）は、一連の接続された座標を順序付けされたシーケンスで定義します。また、ポリゴンは閉じたループを形成し、塗りつぶされた領域を定義します。Polygon3DElement とは異なり、Polygon3DInteractiveElement は gmp-click イベントを受け取ります。

カスタム要素:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

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

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

const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
パラメータ: 
指定されたオプションで Polygon3DInteractiveElement を作成します。
継承: altitudeMode、 drawsOccludedSegments、 extruded、 fillColor、 geodesic、 innerPaths、 path、 strokeColor、 strokeWidth、 zIndex、 outerCoordinates、 innerCoordinates
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 をご覧ください。
gmp-click
function(clickEvent)
引数: 
  • clickEvent:  LocationClickEvent イベント オブジェクトには、クリックされた場所の緯度、経度、高度が含まれます。
このイベントは、Polygon3DInteractiveElement 要素がクリックされたときに発生します。

Polygon3DInteractiveElementOptions インターフェース

google.maps.maps3d.Polygon3DInteractiveElementOptions インターフェース

Polygon3DInteractiveElement に設定できるプロパティを定義するために使用される Polygon3DInteractiveElementOptions オブジェクト。

このインターフェースは Polygon3DElementOptions を拡張します。
継承: altitudeMode、 drawsOccludedSegments、 extruded、 fillColor、 geodesic、 innerCoordinates、 outerCoordinates、 strokeColor、 strokeWidth、 zIndex

PopoverElement クラス

google.maps.maps3d.PopoverElement クラス

ポップオーバーをレンダリングするカスタム HTML 要素。吹き出しのような形で、多くの場合、マーカーに接続されています。

カスタム要素:
<gmp-popover altitude-mode="absolute" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

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

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

const {PopoverElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PopoverElement
PopoverElement([options])
パラメータ: 
altitudeMode
タイプ:  AltitudeMode optional
デフォルト: AltitudeMode.CLAMP_TO_GROUND
位置の高度コンポーネントの解釈方法を指定します。
HTML 属性:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
autoPanDisabled
タイプ:  boolean optional
デフォルト: false
true に設定すると、ポップオーバーが開いたときに地図をパンしてポップオーバーを完全に表示する機能が無効になります。
HTML 属性:
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
タイプ:  boolean optional
デフォルト: false
このポップオーバーを「ライト ディスミス」にするかどうかを指定します。「ライトディスミス」の動作は、ブラウザの Popover API の一部である popover="auto" 属性を設定する場合と似ています。
HTML 属性:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
タイプ:  boolean optional
デフォルト: false
このポップオーバーを開くかどうかを指定します。
HTML 属性:
  • <gmp-popover open></gmp-popover>
positionAnchor
このポップオーバーを表示する位置。ポップオーバーがインタラクティブ マーカーに固定されている場合は、代わりにマーカーの位置が使用されます。
HTML 属性:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
スロット付きコンテンツをポップオーバーのメイン セクションに配置します。
header
スロット付きコンテンツをポップオーバーの見出しセクションに配置します。
--gmp-popover-max-width
コンテンツの幅に関係なく、ポップオーバーの最大幅。
--gmp-popover-min-width
コンテンツの幅に関係なく、ポップオーバーの最小幅。このプロパティを使用する場合は、地図の幅（ピクセル単位）よりも小さい値に設定することを強くおすすめします。
--gmp-popover-pixel-offset-x
ポップオーバーの先端の X 軸方向のオフセット（ピクセル単位）。ポップオーバーが固定されている地図上のポイントの地理座標からのオフセットです。
--gmp-popover-pixel-offset-y
ポップオーバーが固定されている地図上の地理座標から、ポップオーバーの先端までの Y 軸方向のオフセット（ピクセル単位）。
background-color
ポップオーバーの背景色。詳しくは、background-color のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。
border-radius
ポップオーバーの border-radius。詳しくは、border-radius のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。
box-shadow
ポップオーバーの box-shadow。詳しくは、box-shadow のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。
color-scheme
このポップオーバーをレンダリングできるカラーパターンを示します。詳しくは、color-scheme のドキュメントをご覧ください。指定しない場合、デフォルトはユーザーのカラーパターンの設定になります。
padding
ポップオーバーのパディング。詳しくは、padding のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。
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 をご覧ください。

PopoverElementOptions インターフェース

google.maps.maps3d.PopoverElementOptions インターフェース

PopoverElement に設定できるプロパティを定義するために使用される PopoverElementOptions オブジェクト。
altitudeMode optional
タイプ:  AltitudeMode optional
PopoverElement.altitudeMode をご覧ください。
autoPanDisabled optional
タイプ:  boolean optional
PopoverElement.autoPanDisabled をご覧ください。
lightDismissDisabled optional
タイプ:  boolean optional
PopoverElement.lightDismissDisabled をご覧ください。
open optional
タイプ:  boolean optional
PopoverElement.open をご覧ください。
positionAnchor optional
PopoverElement.positionAnchor をご覧ください。

AltitudeMode 定数

google.maps.maps3d.AltitudeMode 定数

座標の高度コンポーネントの解釈方法を指定します。

const {AltitudeMode} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
ABSOLUTE 平均海面を基準にしてオブジェクトを表現できます。つまり、オブジェクトの下の地形の詳細レベルが変更されても、オブジェクトの絶対位置は変わりません。
CLAMP_TO_GROUND 地面に置かれたオブジェクトを表現できます。指定された高度に関係なく、地形に沿って地表レベルに留まります。オブジェクトが主要な水域の上に配置されている場合は、海抜に配置されます。
RELATIVE_TO_GROUND 地表を基準としてオブジェクトを表現できます。地形の詳細レベルが変更されても、オブジェクトの位置は地面に対して一定に保たれます。水上では、高度は海抜（メートル）の値として解釈されます。
RELATIVE_TO_MESH 地面、建物、水面のうち最も高いものを基準にしてオブジェクトを表現できます。水上の場合は水面、地形上の場合は建物の表面（存在する場合）または地表（建物がない場合）になります。