MapElement クラス
google.maps.MapElement クラス
MapElement は、地図をレンダリングするための HTMLElement サブクラスです。maps ライブラリを読み込んだ後、HTML で地図を作成できます。次に例を示します。
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
<button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>内部的には
Map を使用します。これは MapElement.innerMap プロパティでアクセスできます。
カスタム要素:
<gmp-map center="lat,lng" heading-interaction-disabled internal-usage-attribution-ids="id1 id2" map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>
このクラスは HTMLElement を拡張します。
このクラスは MapElementOptions を実装します。
const {MapElement} = await google.maps.importLibrary("maps") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
|---|---|
MapElement |
MapElement([options])パラメータ:
|
プロパティ | |
|---|---|
center |
タイプ:
LatLng|LatLngLiteral optional地図の中心の緯度と経度。
HTML 属性:
|
headingInteractionDisabled |
タイプ:
boolean optionalデフォルト:
false地図でカメラの向き（回転）をユーザーが制御できるようにするかどうか。このオプションは、地図がベクター地図の場合にのみ有効です。コードで設定されていない場合は、地図 ID のクラウド構成が使用されます（利用可能な場合）。
HTML 属性:
|
innerMap |
タイプ:
MapMapElement が内部で使用する Map への参照。 |
internalUsageAttributionIds |
タイプ:
Iterable<string> optionalデフォルト:
null使用状況の帰属 ID を初期化子に追加します。これにより、マーカー クラスタリング ライブラリの使用状況など、デベロッパーに役立つライブラリとサンプルを Google が把握できるようになります。使用状況アトリビューション ID の送信をオプトアウトするには、このプロパティを削除するか、値を空の文字列に置き換えても安全です。一意の値のみが送信されます。インスタンス化後にこの値を変更しても、無視されることがあります。
HTML 属性:
|
mapId |
タイプ:
string optional地図のマップ ID。このパラメータは、マップのインスタンス化後に設定または変更することはできません。
Map.DEMO_MAP_ID を使用すると、マップ ID が必要だがクラウドの有効化は必要ない機能を試すことができます。HTML 属性:
|
renderingType |
タイプ:
RenderingType optionalデフォルト:
RenderingType.VECTOR地図をラスター地図にするかベクター地図にするか。このパラメータは、マップのインスタンス化後に設定または変更することはできません。設定されていない場合、地図 ID のクラウド構成によってレンダリング タイプが決定されます（利用可能な場合）。ベクター地図は、一部のデバイスやブラウザではご利用いただけない場合があります。その場合、地図は必要に応じてラスター地図にフォールバックします。
HTML 属性:
|
tiltInteractionDisabled |
タイプ:
boolean optionalデフォルト:
false地図でユーザーがカメラの傾きを制御できるようにするかどうか。このオプションは、地図がベクター地図の場合にのみ有効です。コードで設定されていない場合は、地図 ID のクラウド構成が使用されます（利用可能な場合）。
HTML 属性:
|
zoom |
タイプ:
number optional地図のズームレベル。有効なズーム値は、0 からサポートされている最大ズームレベルまでの数値です。ズーム値が大きいほど、解像度が高くなります。
HTML 属性:
|
メソッド | |
|---|---|
|
addEventListener(type, listener[, options])パラメータ:
戻り値:
void指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options])パラメータ:
戻り値:
voidaddEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
イベント | |
|---|---|
gmp-zoomchange |
function(event)引数:
このイベントは、地図のズーム プロパティが変更されると発生します。 |
MapElementOptions インターフェース
google.maps.MapElementOptions
インターフェース
MapElement に設定できるプロパティを定義するために使用される MapElementOptions オブジェクト。
プロパティ | |
|---|---|
center optional |
タイプ:
LatLng|LatLngLiteral optionalMapElement.center をご覧ください。 |
headingInteractionDisabled optional |
タイプ:
boolean optional |
internalUsageAttributionIds optional |
タイプ:
Iterable<string> optional |
mapId optional |
タイプ:
string optionalMapElement.mapId をご覧ください。 |
renderingType optional |
タイプ:
RenderingType optionalMapElement.renderingType をご覧ください。 |
tiltInteractionDisabled optional |
タイプ:
boolean optionalMapElement.tiltInteractionDisabled をご覧ください。 |
zoom optional |
タイプ:
number optionalMapElement.zoom をご覧ください。 |
ZoomChangeEvent クラス
google.maps.ZoomChangeEvent クラス
このイベントは、モニタリングのズーム変更から作成されます。
このクラスは Event を拡張します。
const {ZoomChangeEvent} = await google.maps.importLibrary("maps") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Map クラス
google.maps.Map クラス
このクラスは MVCObject を拡張します。
const {Map} = await google.maps.importLibrary("maps") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
|---|---|
Map |
Map(mapDiv[, opts])パラメータ:
指定された HTML コンテナ（通常は DIV 要素）内に新しい地図を作成します。 |
定数 | |
|---|---|
DEMO_MAP_ID |
マップ ID が必要なコードサンプルで使用できるマップ ID。このマップ ID は本番環境用アプリでの使用を想定しておらず、クラウド構成が必要な機能（クラウド スタイリングなど）には使用できません。 |
プロパティ | |
|---|---|
controls |
タイプ:
Array<MVCArray<HTMLElement>>地図に添付する追加のコントロール。地図にコントロールを追加するには、コントロールの <div> を、レンダリングする ControlPosition に対応する MVCArray に追加します。 |
data |
タイプ:
Data地図にバインドされた Data のインスタンス。この Data オブジェクトにフィーチャーを追加して、この地図に簡単に表示します。 |
mapTypes |
タイプ:
MapTypeRegistry文字列 ID による MapType インスタンスのレジストリ。 |
overlayMapTypes |
オーバーレイする追加の地図タイプ。オーバーレイのマップタイプは、関連付けられている任意の基本地図の上に表示され、その順序は overlayMapTypes 配列での記述順序です（より高いインデックス値を持つオーバーレイが、低いインデックス値を持つオーバーレイの前に表示されます）。 |
メソッド | |
|---|---|
fitBounds |
fitBounds(bounds[, padding])パラメータ:
戻り値: なし
指定された境界が含まれるようにビューポートを設定します。 注: マップが display: none に設定されている場合、fitBounds 関数はマップのサイズを 0x0 として読み取るため、何も行いません。地図が非表示の状態でビューポートを変更するには、地図を visibility: hidden に設定して、地図の div に実際のサイズが設定されるようにします。ベクターマップの場合、このメソッドはマップの傾斜と見出しをデフォルトのゼロ値に設定します。このメソッドを呼び出すと、地図が境界に合わせてパンやズームを行う際に、スムーズなアニメーションが実行されることがあります。このメソッドがアニメーション化されるかどうかは、内部ヒューリスティックによって決まります。 |
getBounds |
getBounds()パラメータ: なし
戻り値:
LatLngBounds|undefined 現在のビューポートの緯度/経度の境界。現在のビューポートの緯度/経度の境界を返します。世界地図のコピーが複数表示されている場合、経度の範囲は -180 ～ 180 度（両端を含む）になります。地図がまだ初期化されていない場合、または中心とズームが設定されていない場合、結果は undefined になります。傾斜または見出しがゼロ以外のベクター地図の場合、返される緯度/経度の境界は、地図のビューポートで表示されるリージョンを含む最小の境界ボックスを表します。地図のビューポートの正確な表示領域を取得する方法については、MapCanvasProjection.getVisibleRegion をご覧ください。 |
getCenter |
getCenter()パラメータ: なし
戻り値:
LatLng|undefined |
getClickableIcons |
getClickableIcons()パラメータ: なし
戻り値:
boolean|undefined地図アイコンのクリック可能かどうかを返します。地図アイコンは、スポット（POI）を表します。戻り値が true の場合、地図上のアイコンはクリック可能です。 |
|
getDatasetFeatureLayer(datasetId)パラメータ:
戻り値:
FeatureLayer指定された datasetId の FeatureLayer を返します。データセット ID は Google Cloud コンソールで構成する必要があります。データセット ID が地図の地図のスタイルに関連付けられていない場合、またはデータドリブン スタイル設定が利用できない場合（マップ ID、ベクタータイル、地図のスタイルで構成されたデータドリブン スタイル設定のフィーチャー レイヤまたはデータセットがない場合）、エラーがログに記録され、結果の FeatureLayer.isAvailable は false になります。 |
getDiv |
getDiv()パラメータ: なし
戻り値:
HTMLElement 地図の mapDiv。 |
getFeatureLayer |
getFeatureLayer(featureType)パラメータ:
|