3D Maps

Map3DElement クラス

google.maps.maps3d.Map3DElement class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"

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

                  
<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  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="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>

const {Map3DElement} = await google.maps.importLibrary("maps3d");

コンストラクタ
Map3DElement	Map3DElement([options]) パラメータ: options: Map3DElementOptions optional

プロパティ
autofitsCameraAnimation attr: autofits-camera-animation	注: v=alpha チャンネルでのみ利用できます。 入力タイプ: AutofitsCameraAnimation optional 出力タイプ: AutofitsCameraAnimation optional デフォルト: none カメラの自動調整に使用するアニメーション。 HTML 属性: autofits-camera-animation="value-name"
bounds	入力タイプ: LatLngBounds|LatLngBoundsLiteral optional 出力タイプ: LatLngBounds optional 設定すると、指定された緯度 / 経度の境界内にカメラの位置が制限されます。境界外のオブジェクトもレンダリングされます。境界は、緯度と経度の両方を制限することも、緯度または経度のいずれかのみを制限することもできます。緯度のみの境界の場合は、西経と東経にそれぞれ -180 と 180 を使用します。経度のみの境界には、それぞれ 90 と -90 の北緯と南緯を使用します。
cameraPosition attr: camera-position	入力タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional 出力タイプ: LatLngAltitude optional LatLngAltitude として指定されたカメラの位置。省略すると、自動的に導出されます。center が省略され、cameraPosition が指定されている場合、center は cameraPosition. から派生します。両方が同じ実行ループで更新された場合は、cameraPosition が優先されます。cameraPosition フィールドと center フィールドは、指定された共有の見出し、範囲、ロール、チルトのコンテキストで、相互に 1 対 1 で派生できます。 HTML 属性: camera-position="lat,lng,altitude"
center attr: center	入力タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional 出力タイプ: LatLngAltitude optional LatLngAltitude として指定された地図の中心。高度は平均海面からのメートル単位です。range フィールドは、地図の中心からのカメラの距離に影響するため、必ずしもカメラが配置されている場所とは限りません。設定されていない場合、デフォルトの {lat: 0, lng: 0, altitude: 63170000} になります。63,170,000 メートルは、許容される最大高度です（地球の半径の 10 倍）。 HTML 属性: center="lat,lng,altitude"
defaultUIHidden attr: default-ui-hidden	入力タイプ: boolean optional 出力タイプ: boolean デフォルト: false true の場合、デフォルトの UI ボタンはすべて非表示になります。 HTML 属性: default-ui-hidden
description attr: description	入力タイプ: string optional 出力タイプ: string optional 指定すると、ユーザー補助の説明（スクリーン リーダーで使用する場合など）が、指定された値とともに地図に追加されます。 HTML 属性: description="string"
fov attr: fov	入力タイプ: number optional 出力タイプ: number optional 垂直方向の画角を度数で指定します。有効な値の範囲は 5.0 ～ 80.0 です。値を大きくすると表示領域が広がりますが、遠近感の歪みが生じる可能性があります。デフォルト: 35.0。 HTML 属性: fov="number"
gestureHandling attr: gesture-handling	入力タイプ: GestureHandling optional 出力タイプ: GestureHandling デフォルト: GestureHandling.GREEDY cooperative ジェスチャー処理を制御します。COOPERATIVE に設定すると、地図をスクロールするには修飾キーまたは 2 本指の操作が必要になります。GREEDY に設定すると、地図要素のユーザー イベントからホストページをスクロールできなくなります。AUTO に設定すると、ジェスチャーの処理はホストページのスクロール可能性によって決まります。 HTML 属性: gesture-handling="value-name"
heading attr: heading	入力タイプ: number optional 出力タイプ: number optional 地図のコンパス方位（度数）。真北が 0 です。傾きがない場合、ロールはヘディングとして解釈されます。 HTML 属性: heading="number"
internalUsageAttributionIds attr: internal-usage-attribution-ids	入力タイプ: Iterable<string> optional 出力タイプ: Array<string> optional 初期化子に使用状況属性 ID を追加します。これにより、Google は、マーカー クラスタリング ライブラリの使用状況など、デベロッパーにとって有用なライブラリやサンプルを把握できます。使用状況アトリビューション ID の送信をオプトアウトするには、このプロパティを削除しても問題ありません。一意の値のみが送信されます。インスタンス化後にこの値を変更しても無視されることがあります。 HTML 属性: internal-usage-attribution-ids="id1 id2"
language	入力タイプ: string optional 出力タイプ: string optional 基本地図の言語をレンダリングする言語。デフォルトでは、Maps JS API の読み込み時にデベロッパーがリクエストした言語になります。
mapId attr: map-id	入力タイプ: string optional 出力タイプ: string optional 地図の Cloud ベースのマップのスタイル設定を取得するために使用されるマップ ID を指定します。 HTML 属性: map-id="string"
maxAltitude attr: max-altitude	入力タイプ: number optional 出力タイプ: number optional 地図に表示される地上からの最大高度。有効な値は 0～63170000 メートル（地球の半径の 10 倍）です。 HTML 属性: max-altitude="number"
maxHeading attr: max-heading	入力タイプ: number optional 出力タイプ: number optional 地図の最大方位角（回転角）。有効な値は 0～360 度です。minHeading と maxHeading は、ヘディング ジェスチャーが許可される 360 度以下の間隔を表します。minHeading = 180 と maxHeading = 90 は、[0, 90] の見出しと [180, 360] の見出しを許可します。minHeading = 90 と maxHeading = 180 は [90, 180] でのヘディングを許可します。 HTML 属性: max-heading="number"
maxTilt attr: max-tilt	入力タイプ: number optional 出力タイプ: number optional 地図の最大入射角。有効な値は 0～90 度です。 HTML 属性: max-tilt="number"
minAltitude attr: min-altitude	入力タイプ: number optional 出力タイプ: number optional 地図に表示される地上からの最小高度。有効な値は 0～63170000 メートル（地球の半径の 10 倍）です。 HTML 属性: min-altitude="number"
minHeading attr: min-heading	入力タイプ: number optional 出力タイプ: number optional 地図のヘディング（回転）の最小角度。有効な値は 0～360 度です。minHeading と maxHeading は、ヘディング ジェスチャーが許可される 360 度以下の間隔を表します。minHeading = 180 と maxHeading = 90 を使用すると、[0, 90] の見出しと [180, 360] の見出しを使用できます。minHeading = 90 と maxHeading = 180 は、[90, 180] での進行方向を許可します。 HTML 属性: min-heading="number"
minTilt attr: min-tilt	入力タイプ: number optional 出力タイプ: number optional 地図の最小入射角。有効な値は 0～90 度です。 HTML 属性: min-tilt="number"
mode attr: mode	入力タイプ: MapMode optional 出力タイプ: MapMode optional 地図をレンダリングするモードを指定します。設定しない場合、地図はレンダリングされません。 HTML 属性: mode="value-name"
range attr: range	入力タイプ: number optional 出力タイプ: number optional カメラから地図の中心までの距離（メートル単位）。 HTML 属性: range="number"
region	入力タイプ: string optional 出力タイプ: string optional 基本地図のスポットのレンダリングを試みるリージョン。デフォルトでは、Maps JS API の読み込み時にデベロッパーがリクエストしたリージョンになります。
roll attr: roll	入力タイプ: number optional 出力タイプ: number optional ビューベクトルを中心としたカメラのロール（度単位）。曖昧さを解消するため、傾きがない場合、ロールはヘディングとして解釈されます。 HTML 属性: roll="number"
tilt attr: tilt	入力タイプ: number optional 出力タイプ: number optional カメラのビューベクトルの傾き（度単位）。地球を真下に見下ろすビューベクトルの傾きは 0 度になります。地球から離れた方向を指すビューベクトルは、180 度の傾きになります。 HTML 属性: tilt="number"
defaultUIDisabled attr: default-ui-disabled	非推奨: 代わりに Map3DElement.defaultUIHidden を使用してください。このプロパティは今後のリリースで削除される予定です。 タイプ: boolean optional デフォルト: false true の場合、デフォルトの UI ボタンはすべて無効になります。キーボードとジェスチャー コントロールは無効になりません。 HTML 属性: default-ui-disabled

メソッド
flyCameraAround	flyCameraAround(options) パラメータ: options: FlyAroundAnimationOptions 戻り値: なし このメソッドは、指定された期間、指定された場所の周囲をカメラで周回します。アニメーションは、指定された FlyAroundAnimationOptions.repeatCount 回繰り返すことができます。 カメラは時計回りに移動します。 軌道周回の中心となる位置は CameraOptions.center で指定します。これは、軌道アニメーション中にビューポートの中央に表示される場所で、カメラはその周りを移動します。 このメソッドは非同期です。アニメーションは、地図が最小限読み込まれた後にのみ開始できるためです。このメソッドは、アニメーションが開始されると戻ります。 FlyAroundAnimationOptions.repeatCount の回数が 0 の場合、回転は行われず、アニメーションは開始直後に完了します。
flyCameraTo	flyCameraTo(options) パラメータ: options: FlyToAnimationOptions 戻り値: なし このメソッドは、指定された期間にわたって、現在の位置から指定された終了位置にカメラを放物線状に移動します。終了位置は、CameraOptions.cameraPosition（カメラの正確な位置を制御）または CameraOptions.center（地図の表示可能なビューポートの中心を制御）で指定できます。 このメソッドは非同期です。アニメーションは、地図が最小限読み込まれた後にのみ開始できるためです。このメソッドは、アニメーションが開始されると戻ります。
stopCameraAnimation	stopCameraAnimation() パラメータ: なし 戻り値: なし このメソッドは、実行中のフライ アニメーションを停止します。カメラはアニメーションの途中でどこにいても、終了ポイントにテレポートすることはありません。 このメソッドは非同期です。アニメーションは、地図が最小限読み込まれた後にのみ開始または停止できるためです。このメソッドは、アニメーションが停止すると戻ります。
継承元: addEventListener、 removeEventListener

イベント
gmp-animationend	function(animationEndEvent) 引数: animationEndEvent: Event optional このイベントは、フライ アニメーションが終了したときに発生します。このイベントは DOM ツリーをバブルアップします。
gmp-camerapositionchange	function(cameraPositionChangeEvent) 引数: cameraPositionChangeEvent: Event optional このイベントは、Map3DElement の cameraPosition プロパティが変更されたときに発生します。
gmp-centerchange	function(centerChangeEvent) 引数: centerChangeEvent: Event optional このイベントは、Map3DElement の center プロパティが変更されたときに発生します。
gmp-click	function(clickEvent) 引数: clickEvent: LocationClickEvent|PlaceClickEvent optional このイベントは、Map3DElement 要素がクリックされたときに発生します。
gmp-error	function(mapInitializationErrorEvent) 引数: mapInitializationErrorEvent: Event optional このイベントは、地図の初期化に失敗したときに発生します。
gmp-fovchange	function(fovChangeEvent) 引数: fovChangeEvent: Event optional このイベントは、Map3DElement の fov プロパティが変更されたときに発生します。
gmp-headingchange	function(headingChangeEvent) 引数: headingChangeEvent: Event optional このイベントは、Map3DElement の heading プロパティが変更されたときに発生します。
gmp-map-id-error	function(mapIdErrorEvent) 引数: mapIdErrorEvent: Event optional このイベントは、Map3DElement の mapId プロパティが無効な場合に発生します。
gmp-rangechange	function(rangeChangeEvent) 引数: rangeChangeEvent: Event optional このイベントは、Map3DElement の range プロパティが変更されたときに発生します。
gmp-rollchange	function(rollChangeEvent) 引数: rollChangeEvent: Event optional このイベントは、Map3DElement の roll プロパティが変更されたときに発生します。
gmp-steadychange	function(steadyChangeEvent) 引数: steadyChangeEvent: SteadyChangeEvent optional このイベントは、Map3DElement の定常状態が変化したときに発生します。
gmp-tiltchange	function(tiltChangeEvent) 引数: tiltChangeEvent: Event optional このイベントは、Map3DElement の tilt プロパティが変更されたときに発生します。

Map3DElementOptions インターフェース

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

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

プロパティ
autofitsCameraAnimation 省略可	注: v=alpha チャンネルでのみ利用できます。 タイプ: AutofitsCameraAnimation optional Map3DElement.autofitsCameraAnimation をご覧ください。
bounds 省略可	タイプ: LatLngBounds|LatLngBoundsLiteral optional Map3DElement.bounds をご覧ください。
cameraPosition 省略可	タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Map3DElement.cameraPosition をご覧ください。
center 省略可	タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Map3DElement.center をご覧ください。
defaultUIDisabled 省略可	非推奨: 代わりに Map3DElement.defaultUIHidden を使用してください。このプロパティは今後のリリースで削除される予定です。 タイプ: boolean optional Map3DElement.defaultUIDisabled をご覧ください。
defaultUIHidden 省略可	タイプ: boolean optional Map3DElement.defaultUIHidden をご覧ください。
description 省略可	タイプ: string optional Map3DElement.description をご覧ください。
fov 省略可	タイプ: number optional Map3DElement.fov をご覧ください。
gestureHandling 省略可	タイプ: GestureHandling optional Map3DElement.gestureHandling をご覧ください。
heading 省略可	タイプ: number optional Map3DElement.heading をご覧ください。
internalUsageAttributionIds 省略可	タイプ: Iterable<string> optional Map3DElement.internalUsageAttributionIds をご覧ください。
language 省略可	タイプ: string optional Map3DElement.language をご覧ください。
mapId 省略可	タイプ: string optional Map3DElement.mapId をご覧ください。
maxAltitude 省略可	タイプ: number optional Map3DElement.maxAltitude をご覧ください。
maxHeading 省略可	タイプ: number optional Map3DElement.maxHeading をご覧ください。
maxTilt 省略可	タイプ: number optional Map3DElement.maxTilt をご覧ください。
minAltitude 省略可	タイプ: number optional Map3DElement.minAltitude をご覧ください。
minHeading 省略可	タイプ: number optional Map3DElement.minHeading をご覧ください。
minTilt 省略可	タイプ: number optional Map3DElement.minTilt をご覧ください。
mode 省略可	タイプ: MapMode optional Map3DElement.mode をご覧ください。
range 省略可	タイプ: number optional Map3DElement.range をご覧ください。
region 省略可	タイプ: string optional Map3DElement.region をご覧ください。
roll 省略可	タイプ: number optional Map3DElement.roll をご覧ください。
tilt 省略可	タイプ: number optional Map3DElement.tilt をご覧ください。

MapMode 定数

google.maps.maps3d.MapMode constants
library "maps3d"

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

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは MapModeString 型で定義されます。

const {MapMode} = await google.maps.importLibrary("maps3d");

定数
HYBRID	この地図モードでは、航空写真またはフォトリアリスティック画像の上に、主要な道路の透明なレイヤが表示されます。
ROADMAP	注: v=alpha チャンネルでのみ利用できます。 この地図モードでは、通常の道路地図が表示されます。
SATELLITE	この地図モードでは、航空写真またはフォトリアリスティックな画像（利用可能な場合）が表示されます。

GestureHandling 定数

google.maps.maps3d.GestureHandling constants
library "maps3d"

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

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは GestureHandlingString 型で定義されます。

const {GestureHandling} = await google.maps.importLibrary("maps3d");

定数
AUTO	これにより、地図で協調型または貪欲型のジェスチャー処理を使用するかどうかを選択できます。指定しない場合、これがデフォルトの動作になります。 地図がスクロールの親（通常はホストページ）を占有し、ユーザーが地図から他のコンテンツにスクロールできない場合、地図は協調モードになります。
COOPERATIVE	これにより、協調モードが強制され、地図をスクロールするには修飾キーまたは 2 本指の操作が必要になります。
GREEDY	これにより、greedy モードが強制され、地図要素でのユーザー イベントからホストページをスクロールできなくなります。

AutofitsCameraAnimation 定数

google.maps.maps3d.AutofitsCameraAnimation constants
library "maps3d"

注: v=alpha チャンネルでのみ利用できます。

オプトインされた子要素に応じて、カメラが新しい位置に移動して中央に配置される際の動作を指定します。

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは AutofitsCameraAnimationString 型で定義されます。

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");

定数
FLY_TO	新しい位置に移動します。
NONE	アニメーションなしで新しい位置にスナップします。

FlyAroundAnimationOptions インターフェース

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

FlyCameraAround アニメーションのカスタマイズ オプション。

プロパティ
camera	タイプ: CameraOptions 軌道アニメーション中にカメラが向く中心点。カメラがこの中心点を中心に回転すると、地図の向きが変わります。
durationMillis 省略可	タイプ: number optional 1 つのアニメーション サイクルの再生時間（ミリ秒単位）。
repeatCount 省略可	タイプ: number optional アニメーションを繰り返し再生する回数を指定します。値が 0 の場合、アニメーションは開始直後に完了します。Number.Infinity を渡すと、アニメーションは無制限に繰り返されます。
rounds 省略可	非推奨: 代わりに FlyAroundAnimationOptions.repeatCount を使用してください。 タイプ: number optional 指定された時間内に中心を軸に回転する回数。これは回転の全体的な速度を制御します。rounds に負の数を渡すと、カメラはデフォルトの時計回りではなく反時計回りに回転します。

FlyToAnimationOptions インターフェース

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

FlyCameraTo アニメーションのカスタマイズ オプション。

プロパティ
endCamera	タイプ: CameraOptions アニメーションの終了時にカメラが向く位置。
durationMillis 省略可	タイプ: number optional アニメーションの再生時間（ミリ秒単位）。duration を 0 に設定すると、カメラは終了位置に直接テレポートします。

CameraOptions インターフェース

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

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

プロパティ
altitudeMode 省略可	タイプ: AltitudeMode optional デフォルト: AltitudeMode.ABSOLUTE 指定された CameraOptions オブジェクトの高度値の解釈方法を指定する列挙型。これにより、既存の AltitudeMode 列挙型が再利用されます。
cameraPosition 省略可	タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Map3DElement.cameraPosition をご覧ください。
center 省略可	タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Map3DElement.center をご覧ください。
fov 省略可	タイプ: number optional Map3DElement.fov をご覧ください。
heading 省略可	タイプ: number optional Map3DElement.heading をご覧ください。
range 省略可	タイプ: number optional Map3DElement.range をご覧ください。
roll 省略可	タイプ: number optional Map3DElement.roll をご覧ください。
tilt 省略可	タイプ: number optional Map3DElement.tilt をご覧ください。

SteadyChangeEvent クラス

google.maps.maps3d.SteadyChangeEvent class
extends Event
library "maps3d"

このイベントは、Map3DElement の定常状態をモニタリングすることで作成されます。このイベントは DOM ツリーをバブルアップします。

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");

プロパティ
isSteady	タイプ: boolean Map3DElement が安定している（つまり、現在のシーンのすべてのレンダリングが完了している）かどうかを示します。

LocationClickEvent クラス

google.maps.maps3d.LocationClickEvent class
extends Event
library "maps3d"

このイベントは、Map3DElement をクリックすると作成されます。

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");

プロパティ
position	タイプ: LatLngAltitude optional イベント発生時にカーソルの下にあった緯度、経度、高度。なお、レベルが粗いほど、返されるデータの精度は低くなります。また、カメラの位置が高いときに水面をクリックすると、高度の値として海底の標高が返されることがあります。このイベントは DOM ツリーをバブルアップします。

PlaceClickEvent クラス

google.maps.maps3d.PlaceClickEvent class
extends LocationClickEvent
library "maps3d"

このイベントは、Map3DElement で場所アイコンをクリックすると作成されます。デフォルトのポップオーバーが表示されないようにするには、このイベントで preventDefault() メソッドを呼び出して、Map3DElement で処理されないようにします。

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");

プロパティ
placeId	タイプ: string 地図対象物のプレイス ID。
継承: position

メソッド
fetchPlace	fetchPlace() パラメータ: なし 戻り値: Promise<Place> このプレイス ID の Place を取得します。結果の Place オブジェクトでは、id プロパティが入力されます。追加のフィールドは、通常の Places API の有効化と課金の対象として、Place.fetchFields() を介して後でリクエストできます。Place の取得中にエラーが発生した場合、Promise は拒否されます。