3D Maps

Map3DElement クラス

google.maps.maps3d.Map3DElement クラス

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

カスタム要素:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" 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" default-ui-disabled></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>
defaultUIHidden
タイプ:  boolean optional
デフォルト: false
true の場合、デフォルトの UI ボタンはすべて非表示になります。
HTML 属性:
  • <gmp-map-3d default-ui-hidden></gmp-map-3d>
description
タイプ:  string optional
指定すると、ユーザー補助の説明（スクリーン リーダーで使用する場合など）が、指定された値とともに地図に追加されます。
HTML 属性:
  • <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling
タイプ:  GestureHandling optional
デフォルト: GestureHandling.GREEDY
cooperative ジェスチャー処理を制御します。COOPERATIVE に設定すると、地図をスクロールするには修飾キーまたは 2 本指の操作が必要になります。GREEDY に設定すると、地図要素のユーザー イベントからホストページをスクロールできなくなります。AUTO に設定すると、ジェスチャーの処理はホストページのスクロール可能性によって決まります。
HTML 属性:
  • <gmp-map-3d gesture-handling="auto"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="greedy"></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>
language
タイプ:  string optional
基本地図の言語をレンダリングする言語。デフォルトでは、Maps JS API の読み込み時にデベロッパーがリクエストした言語になります。
mapId
タイプ:  string optional
地図の Cloud ベースのマップのスタイル設定を取得するために使用されるマップ ID を指定します。地図の初期化後に設定しないでください。そのため、mapId は初期化時にのみ設定され、この属性は一般公開チャネルに公開されません。
HTML 属性:
  • <gmp-map-3d map-id="string"></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>
region
タイプ:  string optional
基本地図のスポットのレンダリングを試みるリージョン。デフォルトでは、Maps JS API の読み込み時にデベロッパーがリクエストしたリージョンになります。
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>
defaultUIDisabled
タイプ:  boolean optional
デフォルト: false
true の場合、デフォルトの UI ボタンはすべて無効になります。キーボードとジェスチャー コントロールは無効になりません。
HTML 属性:
  • <gmp-map-3d default-ui-disabled></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)
パラメータ: 
戻り値: なし
このメソッドは、指定された期間、指定された場所の周囲をカメラで周回します。アニメーションは、指定された FlyAroundAnimationOptions.repeatCount 回繰り返すことができます。

カメラは時計回りに移動します。

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

FlyAroundAnimationOptions.repeatCount の回数が 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-map-id-error
function(mapIdErrorEvent)
引数: 
  • mapIdErrorEvent:  Event
このイベントは、Map3DElement の mapId プロパティが無効な場合に発生します。
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 の tilt プロパティが変更されたときに発生します。

Map3DElementOptions インターフェース

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

Map3DElement に設定できるプロパティを定義するために使用される Map3DElementOptions オブジェクト。
bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
Map3DElement.bounds をご覧ください。
center optional
Map3DElement.center をご覧ください。
defaultUIDisabled optional
タイプ:  boolean optional
Map3DElement.defaultUIDisabled をご覧ください。
defaultUIHidden optional
タイプ:  boolean optional
Map3DElement.defaultUIHidden をご覧ください。
description optional
タイプ:  string optional
Map3DElement.description をご覧ください。
gestureHandling optional
タイプ:  GestureHandling optional
Map3DElement.gestureHandling をご覧ください。
heading optional
タイプ:  number optional
Map3DElement.heading をご覧ください。
internalUsageAttributionIds optional
タイプ:  Iterable<string> optional
Map3DElement.internalUsageAttributionIds をご覧ください。
language optional
タイプ:  string optional
Map3DElement.language をご覧ください。
mapId optional
タイプ:  string optional
Map3DElement.mapId をご覧ください。
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 をご覧ください。
region optional
タイプ:  string optional
Map3DElement.region をご覧ください。
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 この地図モードでは、航空写真またはフォトリアリスティック画像の上に、主要な道路の透明なレイヤが表示されます。
SATELLITE この地図モードでは、航空写真またはフォトリアリスティックな画像（利用可能な場合）が表示されます。

GestureHandling 定数

google.maps.maps3d.GestureHandling 定数

地図要素でジェスチャー イベントを処理する方法を指定します。

const {GestureHandling} = await google.maps.importLibrary("maps3d") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
AUTO これにより、地図で協調型または貪欲型のジェスチャー処理を使用するかどうかを選択できます。指定しない場合、これがデフォルトの動作になります。

地図がスクロールの親（通常はホストページ）を占有し、ユーザーが地図から他のコンテンツにスクロールできない場合、地図は協調モードになります。
COOPERATIVE これにより、協調モードが強制され、地図をスクロールするには修飾キーまたは 2 本指の操作が必要になります。
GREEDY これにより、greedy モードが強制され、地図要素でのユーザー イベントからホストページをスクロールできなくなります。

FlyAroundAnimationOptions インターフェース

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

FlyCameraAround アニメーションのカスタマイズ オプション。
camera
タイプ:  CameraOptions
軌道アニメーション中にカメラが向く中心点。カメラがこの中心点を中心に回転すると、地図の向きが変わります。
durationMillis optional
タイプ:  number optional
1 つのアニメーション サイクルの再生時間（ミリ秒単位）。
repeatCount optional
タイプ:  number optional
アニメーションを繰り返し再生する回数を指定します。この値が 0 の場合、アニメーションは開始直後に完了します。
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 で場所アイコンをクリックすると作成されます。デフォルトのポップオーバーが表示されないようにするには、このイベントで preventDefault() メソッドを呼び出して、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 は拒否されます。