3D Maps

Map3DElement クラス

google.maps.maps3d.Map3DElement クラス

Map3DElement は、3D 地図ビューの HTML インターフェースです。3D 地図のレンダリングを開始するには、mode を設定する必要があります。

カスタム要素:
<gmp-map-3d center="lat,lng,altitude" default-ui-disabled heading="number" internal-usage-attribution-ids="id1 id2" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" 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>
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>
internalUsageAttributionIds
タイプ:  Iterable<string> optional
使用状況の帰属 ID を初期化子に追加します。これにより、マーカー クラスタリング ライブラリの使用状況など、デベロッパーに役立つライブラリとサンプルを Google が把握できるようになります。使用状況アトリビューション ID の送信をオプトアウトするには、このプロパティを削除しても安全です。一意の値のみが送信されます。インスタンス化後にこの値を変更しても、無視されることがあります。
HTML 属性:
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></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>
mode
タイプ:  MapMode optional
地図のレンダリング モードを指定します。設定されていない場合、地図はレンダリングされません。
HTML 属性:
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></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>
addEventListener
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)
パラメータ: 
戻り値: なし
このメソッドは、指定された期間にわたって、現在の位置から指定された終了位置までカメラを放物線状に移動させます。

アニメーションは地図が最小限読み込まれた後にのみ開始できるため、このメソッドは非同期です。アニメーションが開始されると、メソッドは戻ります。
removeEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • options:  boolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  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-error
function(mapInitializationErrorEvent)
引数: 
  • mapInitializationErrorEvent:  Event
このイベントは、地図の初期化に失敗したときに発生します。
gmp-headingchange
function(headingChangeEvent)
引数: 
  • headingChangeEvent:  Event
このイベントは、Map3DElement の heading プロパティが変更されたときに発生します。
gmp-rangechange
function(rangeChangeEvent)
引数: 
  • rangeChangeEvent:  Event
このイベントは、Map3DElement の range プロパティが変更されたときに発生します。
gmp-rollchange
function(rollChangeEvent)
引数: 
  • rollChangeEvent:  Event
このイベントは、Map3DElement の roll プロパティが変更されたときに発生します。
gmp-steadychange
function(steadyChangeEvent)
引数: 
このイベントは、Map3DElement の定常状態が変化したときに発生します。
gmp-tiltchange
function(tiltChangeEvent)
引数: 
  • tiltChangeEvent:  Event
このイベントは、Map3DElement の傾斜プロパティが変更されたときに発生します。

Map3DElementOptions インターフェース

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

Map3DElement で設定できるプロパティを定義するために使用される Map3DElementOptions オブジェクト。
bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
Map3DElement.bounds をご覧ください。
center optional
Map3DElement.center をご覧ください。
defaultUIDisabled optional
タイプ:  boolean optional
Map3DElement.defaultUIDisabled をご覧ください。
heading optional
タイプ:  number optional
Map3DElement.heading をご覧ください。
internalUsageAttributionIds optional
タイプ:  Iterable<string> optional
Map3DElement.internalUsageAttributionIds をご覧ください。
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 をご覧ください。
mode optional
タイプ:  MapMode optional
Map3DElement.mode をご覧ください。
range optional
タイプ:  number optional
Map3DElement.range をご覧ください。
roll optional
タイプ:  number optional
Map3DElement.roll をご覧ください。
tilt optional
タイプ:  number optional
Map3DElement.tilt をご覧ください。

MapMode 定数

google.maps.maps3d.MapMode 定数

地図のレンダリング モードを指定します。

const {MapMode} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
HYBRID この地図モードでは、航空写真またはフォトリアリスティックな画像の上に主要な道路の透明なレイヤが表示されます。