3D Maps

Map3DElement クラス

google.maps.maps3d.Map3DElement クラス

Map3DElement は、3D 地図表示用の HTML インターフェースです。

カスタム要素:
<gmp-map-3d center="lat,lng,altitude" default-labels-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} になります。最大許容標高は 63170000 メートルです（地球の半径に 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>
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 をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-centerchange
function(centerChangeEvent)
引数: 
このイベントは、Map3DElement の center プロパティが変更されると発生します。
gmp-click
function(clickEvent)
引数: 
このイベントは、Map3DElement 要素がクリックされると発生します。
gmp-headingchange
function(headingChangeEvent)
引数: 
このイベントは、Map3DElement の heading プロパティが変更されると発生します。
gmp-rangechange
function(rangeChangeEvent)
引数: 
このイベントは、Map3DElement の range プロパティが変更されると発生します。
gmp-rollchange
function(rollChangeEvent)
引数: 
このイベントは、Map3DElement の roll プロパティが変更されると発生します。
gmp-steadychange
function(steadyChangeEvent)
引数: 
このイベントは、Map3DElement の定常状態が変化すると発生します。
gmp-tiltchange
function(tiltChangeEvent)
引数: 
このイベントは、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をご確認ください。
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をご確認ください。

SteadyChangeEvent クラス

google.maps.maps3d.SteadyChangeEvent クラス

このイベントは、Map3DElement の安定状態のモニタリングから作成されます。

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

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

ClickEvent クラス

google.maps.maps3d.ClickEvent クラス

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

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

const {ClickEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
position
タイプ:  LatLngAltitude optional
イベントが発生したときにカーソルの下にあった緯度/経度/高度。基準レベルが低ければ、返されるデータの精度も低くなります。また、カメラの高い位置から水面をクリックすると、標高値が海底高度として返される場合があります。

CenterChangeEvent クラス

google.maps.maps3d.CenterChangeEvent クラス

このイベントは、Map3DElementにモニタリング センターの変更により作成されています。

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

const {CenterChangeEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

HeadingChangeEvent クラス

google.maps.maps3d.HeadingChangeEvent クラス

このイベントは、Map3DElement の方向変更のモニタリングから作成されます。

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

const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

RangeChangeEvent クラス

google.maps.maps3d.RangeChangeEvent クラス

このイベントは、Map3DElement のモニタリング範囲の変更から作成されています。

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

const {RangeChangeEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

RollChangeEvent クラス

google.maps.maps3d.RollChangeEvent クラス

このイベントは、Map3DElement のロールの変更のモニタリングから作成されています。

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

const {RollChangeEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

TiltChangeEvent クラス

google.maps.maps3d.TiltChangeEvent クラス

このイベントは、Map3DElement の傾斜の変化のモニタリングから作成されました。

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

const {TiltChangeEvent} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。

Polyline3DElement クラス

google.maps.maps3d.Polyline3DElement クラス

3D ポリラインは、3D 地図上に接続されたライン セグメントからなる線形オーバーレイです。

カスタム要素:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polyline-3d>

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

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

const {Polyline3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
Polyline3DElement
Polyline3DElement([options])
パラメータ: 
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>
outerOpacity
タイプ:  number optional
0.0～1.0 の外側の不透明度。
HTML 属性:
  • <gmp-polyline-3d outer-opacity="number"></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>
strokeOpacity
タイプ:  number optional
ストロークの不透明度（0.0～1.0）。
HTML 属性:
  • <gmp-polyline-3d stroke-opacity="number"></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
デフォルト: AltitudeMode.ABSOLUTE
Polyline3DElement.altitudeModeをご確認ください。
coordinates optional
Polyline3DElement.coordinatesをご確認ください。
drawsOccludedSegments optional
タイプ:  boolean optional
デフォルト: false
Polyline3DElement.drawsOccludedSegmentsをご確認ください。
extruded optional
タイプ:  boolean optional
デフォルト: false
Polyline3DElement.extrudedをご確認ください。
geodesic optional
タイプ:  boolean optional
デフォルト: false
Polyline3DElement.geodesicをご確認ください。
outerColor optional
タイプ:  string optional
Polyline3DElement.outerColorをご確認ください。
outerOpacity optional
タイプ:  number optional
Polyline3DElement.outerOpacityをご確認ください。
outerWidth optional
タイプ:  number optional
Polyline3DElement.outerWidthをご確認ください。
strokeColor optional
タイプ:  string optional
Polyline3DElement.strokeColorをご確認ください。
strokeOpacity optional
タイプ:  number optional
Polyline3DElement.strokeOpacityをご確認ください。
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" fill-opacity="number" geodesic stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polygon-3d>

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

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

const {Polygon3DElement} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
Polygon3DElement
Polygon3DElement([options])
パラメータ: 
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>
fillOpacity
タイプ:  number optional
0.0～1.0 で指定された塗りつぶしの不透明度。
HTML 属性:
  • <gmp-polygon-3d fill-opacity="number"></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>
strokeOpacity
タイプ:  number optional
ストロークの不透明度（0.0～1.0）。
HTML 属性:
  • <gmp-polygon-3d stroke-opacity="number"></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
デフォルト: AltitudeMode.ABSOLUTE
Polygon3DElement.altitudeModeをご確認ください。
drawsOccludedSegments optional
タイプ:  boolean optional
デフォルト: false
Polygon3DElement.drawsOccludedSegmentsをご確認ください。
extruded optional
タイプ:  boolean optional
デフォルト: false
Polygon3DElement.extrudedをご確認ください。
fillColor optional
タイプ:  string optional
Polygon3DElement.fillColorをご確認ください。
fillOpacity optional
タイプ:  number optional
Polygon3DElement.fillOpacityをご確認ください。
geodesic optional
タイプ:  boolean optional
デフォルト: false
Polygon3DElement.geodesicをご確認ください。
innerCoordinates optional
Polygon3DElement.innerCoordinatesをご確認ください。
outerCoordinates optional
Polygon3DElement.outerCoordinatesをご確認ください。
strokeColor optional
タイプ:  string optional
Polygon3DElement.strokeColorをご確認ください。
strokeOpacity optional
タイプ:  number optional
Polygon3DElement.strokeOpacityをご確認ください。
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 地面 + 建物 + 水面の高さを基準としてオブジェクトを表現できます。水面の場合は水面になります。地形上の場合は、建物の表面（存在する場合）または地面（建物がない場合）になります。