3D Maps

Map3DElement クラス

google.maps.maps3d.Map3DElement クラス

Map3DElement は、3D 地図ビューの HTML インターフェースです。

カスタム要素:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>

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

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

const {Map3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
Map3DElement
Map3DElement([options])
パラメータ: 
bounds
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
設定すると、指定された緯度 / 経度の境界内にカメラの位置が制限されます。境界外のオブジェクトは引き続きレンダリングされます。境界では、経度と緯度の両方を制限することも、緯度または経度のいずれかを制限することもできます。緯度のみの境界には、西経と東経の経度（それぞれ -180 と 180）を使用します。経度のみの境界には、北と南の緯度（それぞれ 90 と -90）を使用します。
center
LatLngAltitude として指定された地図の中心。高度は地面からのメートル単位です。range フィールドは地図の中心からのカメラの距離に影響するため、必ずしもカメラの位置とは限りません。設定しない場合、デフォルトの {lat: 0, lng: 0, altitude: 63170000} になります。63,170,000 メートルは、許容される最大高度（地球の半径に 10 を掛けた値）です。
HTML 属性:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
タイプ:  boolean optional
デフォルト: false
true に設定すると、デフォルトのマップラベルはレンダリングされません。
HTML 属性:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
defaultUIDisabled
タイプ:  boolean optional
デフォルト: false
true の場合、デフォルトの UI ボタンはすべて無効になります。キーボードとジェスチャー操作が無効になりません。
HTML 属性:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
タイプ:  number optional
地図のコンパス方位（真北を 0 とした度数）。傾斜がない場合、ロールは向きとして解釈されます。
HTML 属性:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
タイプ:  number optional
地図に表示される地表からの最大高度。有効な値は 0～63170000 メートル（地球の半径に 10 を掛けた値）です。
HTML 属性:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
タイプ:  number optional
地図の向き（回転）の最大角度。有効な値は 0～360 度です。minHeading と maxHeading は、ヘディング ジェスチャーが許可される 360 度以下の間隔を表します。minHeading = 180 と maxHeading = 90 は、[0, 90] のヘディングと [180, 360] のヘディングを許可します。minHeading = 90 と maxHeading = 180 は [90, 180] でヘッダーを許可します。
HTML 属性:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
タイプ:  number optional
地図の最大入射角。有効な値は 0～90 度です。
HTML 属性:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
タイプ:  number optional
地表からの最小高度（地図に表示されます）。有効な値は 0～63170000 メートル（地球の半径に 10 を掛けた値）です。
HTML 属性:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
タイプ:  number optional
地図の向き（回転）の最小角度。有効な値は 0～360 度です。minHeading と maxHeading は、ヘディング ジェスチャーが許可される 360 度以下の間隔を表します。minHeading = 180 と maxHeading = 90 は、[0, 90] のヘディングと [180, 360] のヘディングを許可します。minHeading = 90 と maxHeading = 180 は [90, 180] でヘッダーを許可します。
HTML 属性:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
タイプ:  number optional
地図の最小表示角度。有効な値は 0～90 度です。
HTML 属性:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
range
タイプ:  number optional
カメラから地図の中心までの距離（メートル）。
HTML 属性:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
タイプ:  number optional
ビュー ベクトルに対するカメラのロール（度数）。不確実性を解消するため、傾斜がない場合、ロールは向きとして解釈されます。
HTML 属性:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
タイプ:  number optional
カメラのビュー ベクトルの傾斜（度単位）。地球を真上から見下ろすビューベクトルの傾斜は 0 度です。この場合、地球とは反対方向を指すビュー ベクトルの傾きは 180 度になります。
HTML 属性:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す文字列（大文字と小文字は区別されます）。
  • listener:  EventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントは capture と passive のみをサポートします。
戻り値:  void
指定したイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
flyCameraAround
flyCameraAround(options)
パラメータ: 
戻り値: なし
このメソッドは、指定された場所の周囲を指定された時間だけ回転し、その間に指定された回数だけ回転します。

デフォルトでは、カメラは時計回りに回転します。回転数に負の値を指定すると、カメラは反時計回りに回転します。

アニメーションは、地図が最小量読み込まれた後にのみ開始できるため、このメソッドは非同期です。アニメーションが開始されると、メソッドが返されます。

ラウンド数が 0 の場合、スピンは行われず、アニメーションは開始直後に完了します。
flyCameraTo
flyCameraTo(options)
パラメータ: 
戻り値: なし
このメソッドは、指定した時間内にカメラを現在の位置から指定した最終位置に放物線状に移動させます。

アニメーションは、地図が最小量読み込まれた後にのみ開始できるため、このメソッドは非同期です。アニメーションが開始されると、メソッドが返されます。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
stopCameraAnimation
stopCameraAnimation()
パラメータ: なし
戻り値: なし
このメソッドは、実行中の可能性のあるフライ アニメーションを停止します。カメラはアニメーションの途中の位置に留まり、エンドポイントにテレポートしません。

アニメーションを開始または停止できるのは、地図が最小量読み込まれた後のみであるため、このメソッドは非同期です。アニメーションが停止すると、メソッドが返されます。
gmp-animationend
function(animationEndEvent)
引数: 
  • animationEndEvent:  Event
このイベントは、フライ アニメーションが終了すると発生します。このイベントは DOM ツリーを通過します。
gmp-centerchange
function(centerChangeEvent)
引数: 
  • centerChangeEvent:  Event
このイベントは、Map3DElement の center プロパティが変更されると発生します。
gmp-click
function(clickEvent)
引数: 
このイベントは、Map3DElement 要素がクリックされると発生します。
gmp-headingchange
function(headingChangeEvent)
引数: 
  • headingChangeEvent:  Event
このイベントは、Map3DElement の heading プロパティが変更されたときに発生します。
gmp-rangechange
function(rangeChangeEvent)
引数: 
  • rangeChangeEvent:  Event
このイベントは、Map3DElement の範囲プロパティが変更されたときに発生します。
gmp-rollchange
function(rollChangeEvent)
引数: 
  • rollChangeEvent:  Event
このイベントは、Map3DElement の roll プロパティが変更されると発生します。
gmp-steadychange
function(steadyChangeEvent)
引数: 
このイベントは、Map3DElement の安定状態が変更されたときに発生します。
gmp-tiltchange
function(tiltChangeEvent)
引数: 
  • tiltChangeEvent:  Event
このイベントは、Map3DElement の tilt プロパティが変更されると発生します。

Map3DElementOptions インターフェース

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

Map3DElement に設定できるプロパティを定義するために使用される Map3DElementOptions オブジェクト。
bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
Map3DElement.bounds をご覧ください。
center optional
Map3DElement.center をご覧ください。
defaultLabelsDisabled optional
タイプ:  boolean optional
Map3DElement.defaultLabelsDisabled をご覧ください。
defaultUIDisabled optional
タイプ:  boolean optional
Map3DElement.defaultUIDisabled をご覧ください。
heading optional
タイプ:  number optional
Map3DElement.heading をご覧ください。
maxAltitude optional
タイプ:  number optional
Map3DElement.maxAltitude をご覧ください。
maxHeading optional
タイプ:  number optional
Map3DElement.maxHeading をご覧ください。
maxTilt optional
タイプ:  number optional
Map3DElement.maxTilt をご覧ください。
minAltitude optional
タイプ:  number optional
Map3DElement.minAltitude をご覧ください。
minHeading optional
タイプ:  number optional
Map3DElement.minHeading をご覧ください。
minTilt optional
タイプ:  number optional
Map3DElement.minTilt をご覧ください。
range optional
タイプ:  number optional
Map3DElement.range をご覧ください。
roll optional
タイプ:  number optional
Map3DElement.roll をご覧ください。
tilt optional
タイプ:  number optional
Map3DElement.tilt をご覧ください。

FlyAroundAnimationOptions インターフェース

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

FlyCameraAround アニメーションのカスタマイズ オプション。
camera
タイプ:  CameraOptions
回転アニメーション中にカメラが向く中心点。カメラがこの中心点を周回すると、地図の向きが変わります。
durationMillis optional
タイプ:  number optional
アニメーションの再生時間（ミリ秒単位）。これは、1 回の回転の長さではなく、アニメーションの合計時間です。
rounds optional
タイプ:  number optional
指定された時間内に中心の周りを回転する回数。これにより、全体的な回転速度を制御します。負の数値を rounds に渡すと、カメラはデフォルトの時計回りではなく反時計回りに回転します。

FlyToAnimationOptions インターフェース

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

FlyCameraTo アニメーションのカスタマイズ オプション。
endCamera
タイプ:  CameraOptions
アニメーションの終了時にカメラが向く位置。
durationMillis optional
タイプ:  number optional
アニメーションの再生時間（ミリ秒単位）。duration を 0 にすると、カメラは最終位置に直接テレポートします。

CameraOptions インターフェース

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

CameraOptions オブジェクトは、カメラ オブジェクトに設定できるプロパティを定義するために使用します。カメラ オブジェクトは、カメラの位置を持つものであれば何でもかまいません。たとえば、現在の地図の状態や、今後リクエストされるアニメーションの状態などです。
center optional
Map3DElement.center をご覧ください。
heading optional
タイプ:  number optional
Map3DElement.heading をご覧ください。
range optional
タイプ:  number optional
Map3DElement.range をご覧ください。
roll optional
タイプ:  number optional
Map3DElement.roll をご覧ください。
tilt optional
タイプ:  number optional
Map3DElement.tilt をご覧ください。

SteadyChangeEvent クラス

google.maps.maps3d.SteadyChangeEvent クラス

このイベントは、Map3DElement の安定状態のモニタリングから作成されます。このイベントは DOM ツリーを通過します。

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

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
isSteady
タイプ:  boolean
Map3DElement が安定しているかどうか（つまり、現在のシーンのレンダリングがすべて完了しているかどうか）を示します。

LocationClickEvent クラス

google.maps.maps3d.LocationClickEvent クラス

このイベントは、Map3DElement のクリックによって作成されます。

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

const {LocationClickEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
position
タイプ:  LatLngAltitude optional
イベント発生時にカーソルより下にあった緯度/経度/高度。精度が低いほど精度の低いデータが返されるのでご注意ください。また、カメラの位置が高いところから水面をクリックすると、高度の値として海底の高さが返される場合があります。このイベントは DOM ツリーを介してバブルアップします。

PlaceClickEvent クラス

google.maps.maps3d.PlaceClickEvent クラス

このイベントは、Map3DElement のクリックによって作成されます。

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

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
placeId
タイプ:  string
地図上の対象物のプレイス ID。
継承: position
fetchPlace
fetchPlace()
パラメータ: なし
戻り値:  Promise<Place>
このプレイス ID の Place を取得します。生成された Place オブジェクトの id プロパティに値が入力されます。追加のフィールドは、通常の Places API の有効化と課金の対象に応じて、Place.fetchFields() を介してリクエストできます。Place の取得中にエラーが発生した場合、Promise は拒否されます。

Marker3DElement クラス

google.maps.maps3d.Marker3DElement クラス

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

カスタム要素:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" 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
位置情報の高度コンポーネントの解釈方法を指定します。
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
別の 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
マーカーの先端の位置。高度は特定のモードでは無視されるため、省略可能です。
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 クラスは適用されず、マーカーが画面に表示されるときに反映されない可能性があります。
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す文字列（大文字と小文字は区別されます）。
  • listener:  EventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • options:  boolean|AddEventListenerOptions optional オプションをご確認ください。カスタム イベントは capture と passive のみをサポートします。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

Marker3DElementOptions インターフェース

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

Marker3DElement で設定できるプロパティを定義するために使用される Marker3DElementOptions オブジェクト。
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-marker-3d-interactive>

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

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

const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
パラメータ: 
指定されたオプションを使用して Marker3DInteractiveElement を作成します。
継承: 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])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-click
function(clickEvent)
引数: 
このイベントは、Marker3DInteractiveElement 要素がクリックされたときに発生します。

Marker3DInteractiveElementOptions インターフェース

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

Marker3DInteractiveElement で設定できるプロパティの定義に使用する Marker3DInteractiveElementOptions オブジェクト。

このインターフェースは Marker3DElementOptions を拡張します。
継承: 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" src="src"></gmp-model-3d>

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

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

const {Model3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
Model3DElement
Model3DElement([options])
パラメータ: 
指定されたオプションを使用して Model3DElement を作成します。
altitudeMode
タイプ:  AltitudeMode optional
その位置の標高の解釈方法を指定します。
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 モデルの座標系を回転する方法を記述します。

回転は、ロール、傾斜、方位の順序でモデルに適用されます。
position
Model3DElement の位置を設定します。標高は、一部のモードでは無視されるため、オプションになります。
scale
タイプ:  number|Vector3D|Vector3DLiteral optional
デフォルト: 1
モデルの座標空間で x 軸、y 軸、z 軸に沿ってモデルをスケーリングします。
src
タイプ:  string|URL optional
3D モデルの URL を指定します。現在のところ、.glb 形式のモデルのみがサポートされています。

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

.glb モデルファイルをメイン アプリケーションとは異なるウェブサイトまたはサーバーでホストする場合は、適切な CORS HTTP ヘッダーを設定してください。これにより、アプリケーションは他のドメインからモデルファイルに安全にアクセスできます。
HTML 属性:
  • <gmp-model-3d src="src"></gmp-model-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す大文字と小文字を区別する文字列。
  • listener:  EventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントは capture と passive のみをサポートします。
戻り値:  void
指定したイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  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 をご覧ください。

Polyline3DElement クラス

google.maps.maps3d.Polyline3DElement クラス

3D ポリラインは、3D マップに接続された線分からなる線形オーバーレイです。

カスタム要素:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" 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.ABSOLUTE
座標の標高コンポーネントの解釈方法を指定します。
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>
coordinates
ポリラインの座標の順序列。高度は特定のモードでは無視されるため、省略可能です。
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>
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>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す大文字と小文字を区別する文字列。
  • listener:  EventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントは capture と passive のみをサポートします。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  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 をご覧ください。

Polygon3DElement クラス

google.maps.maps3d.Polygon3DElement クラス

3D ポリゴン（3D ポリラインなど）は、順番に並んだ一連の連結座標を定義します。また、ポリゴンは閉ループを形成し、塗りつぶされた領域を定義します。

カスタム要素:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic 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.ABSOLUTE
座標内の高度コンポーネントの解釈方法を指定します。
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>
innerCoordinates
閉じたループを指定する座標の順序付きシーケンス。ポリラインとは異なり、ポリゴンは 1 つ以上のパスで構成されており、ポリゴン内に複数のカットアウトが作成されます。
outerCoordinates
閉じたループを指定する座標の順序付きシーケンス。標高は、一部のモードでは無視されるため、オプションになります。
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>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す大文字と小文字を区別する文字列。
  • listener:  EventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントは capture と passive のみをサポートします。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  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 をご覧ください。

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 地面、建物、水面のうち最も高い部分に対してオブジェクトを表現できます。水面の場合は水面になります。地形の場合は、建物の表面（存在する場合）または地面（建物がない場合）になります。