3D Maps

Map3DElement クラス

class google.maps.maps3d.Map3DElement 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"
  color-scheme="value-name"
  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-memory-megabytes="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  quality-mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>

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

プロパティ
autofitsCameraAnimation attr: autofits-camera-animation	入力タイプ: 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: 63710000} になります。63,710,000 メートルは、許容される最大高度です（地球の半径に 10 を掛けた値）。 HTML 属性: center="lat,lng,altitude"
colorScheme attr: color-scheme	入力タイプ: ColorScheme optional 出力タイプ: ColorScheme optional デフォルト: ColorScheme.FOLLOW_SYSTEM 地図のカラーパターンを指定します。設定しない場合、ColorScheme.FOLLOW_SYSTEM がデフォルトになります。 HTML 属性: color-scheme="value-name"
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～63710000 メートル（地球の半径の 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"
maxMemoryMegabytes attr: max-memory-megabytes	入力タイプ: number optional 出力タイプ: number optional 地図がレンダリングに使用できる最大メモリ量（MB 単位）。値を小さくすると、メモリ使用量は減りますが、視覚的な詳細が失われます。値を大きくすると、より多くの詳細をメモリに保持できます。有効な値の範囲は 64 ～ 2,048 です。設定しない場合、デバイスと地図のサイズに基づいて上限が自動的に選択されます。地図を初期化する前に設定する必要があります。初期化後に行われた変更は無視されます。 HTML 属性: max-memory-megabytes="number"
maxTilt attr: max-tilt	入力タイプ: number optional 出力タイプ: number optional 地図の最大入射角。有効な値は 0～90 度です。 HTML 属性: max-tilt="number"
minAltitude attr: min-altitude	入力タイプ: number optional 出力タイプ: number optional 地図に表示される地上からの最小高度。有効な値は 0～63710000 メートル（地球の半径の 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"
qualityMode attr: quality-mode	入力タイプ: QualityMode optional 出力タイプ: QualityMode optional デフォルト: QualityMode.FIDELITY 地図のレンダリング品質を指定します。QualityMode.PERFORMANCE に設定すると、視覚的な詳細を減らしてレンダリングされ、メモリ使用量が削減されます。 HTML 属性: quality-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	タイプ: boolean optional デフォルト: false true の場合、デフォルトの UI ボタンはすべて無効になります。キーボードとジェスチャー コントロールは無効になりません。 HTML 属性: default-ui-disabled

Map3DElementOptions インターフェース

インターフェース google.maps.maps3d.Map3DElementOptions
Map3DElement によって実装

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

プロパティ
autofitsCameraAnimation 省略可	タイプ: AutofitsCameraAnimation optional Map3DElement.autofitsCameraAnimation をご覧ください。
bounds 省略可	タイプ: LatLngBounds|LatLngBoundsLiteral optional Map3DElement.bounds をご覧ください。
cameraPosition 省略可	タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Map3DElement.cameraPosition をご覧ください。
center 省略可	タイプ: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Map3DElement.center をご覧ください。
colorScheme 省略可	タイプ: ColorScheme optional Map3DElement.colorScheme をご覧ください。
defaultUIDisabled 省略可	タイプ: 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 をご覧ください。
maxMemoryMegabytes 省略可	タイプ: number optional Map3DElement.maxMemoryMegabytes をご覧ください。
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 をご覧ください。
qualityMode 省略可	タイプ: QualityMode optional Map3DElement.qualityMode をご覧ください。
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
ライブラリ "maps3d"

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

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

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

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

QualityMode 定数

定数 google.maps.maps3d.QualityMode
ライブラリ "maps3d"

3D 地図のレンダリング品質を指定します。

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

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

GestureHandling 定数

定数 google.maps.maps3d.GestureHandling
ライブラリ "maps3d"

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

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

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

AutofitsCameraAnimation 定数

定数 google.maps.maps3d.AutofitsCameraAnimation
ライブラリ "maps3d"

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

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

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

FlyAroundAnimationOptions インターフェース

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

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

FlyToAnimationOptions インターフェース

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

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

CameraOptions インターフェース

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

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

SteadyChangeEvent クラス

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

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

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

LocationClickEvent クラス

クラス google.maps.maps3d.LocationClickEvent Event を拡張
PlaceClickEvent によって拡張
ライブラリ "maps3d"

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

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

LocationPointerEvent クラス

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

このイベントは、インタラクティブな Map3DElement でポインタ操作が発生したときに作成されます。

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

PlaceClickEvent クラス

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

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

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