カメラとビュー

プラットフォームを選択: Android iOS JavaScript

Maps SDK for iOS では、マップのカメラを変更することで、ユーザーの視点位置を変更できます。

Maps SDK for iOS を使用すると、ユーザーは地図の傾斜や回転を行い、状況に合わせて地図を調整できます。どのズームレベルでも、ユーザーはほぼ遅延なく地図をパンしたり、視点を変更したりできます。

カメラに変更を加えても、追加したマーカーやポリラインなどのグラフィックは変更されませんが、新しいビューに合うようにこれらの変更が必要になる場合があります。

地図のビュー

Maps SDK for iOS は、メルカトル図法を使用して、デバイスの画面(平面)上の世界表面(球面)を表します。

カメラの位置

地図ビューは、平面を見下ろすカメラとしてモデル化されています。カメラの位置は(したがってマップのレンダリングも)、target(緯度と経度の位置)bearingtiltzoom の各プロパティで指定されます。

カメラの各プロパティの図

Target(位置)

カメラの target はマップの中心位置で、緯度と経度の座標で指定されます。

緯度は、-85~85 度の範囲で指定できます。この範囲以外の値は、この範囲内の最も近い値に設定されます。たとえば、緯度 100 を指定した場合は、値が 85 に設定されます。経度は -180~180 度の範囲になります。この範囲以外の値は、-180~180 の範囲内に収まるように変換されます。たとえば、480、840、1200 はすべて、120 度に変換されます。

Bearing(向き)

カメラの Bearing は、コンパス方位を真北(地図の上端に対応)からの角度で示したものです。地図の中央から地図上端に向かって垂直線を引いた場合、Bearing はカメラの向き(Heading)を真北からの相対的な角度で示したものに対応します。

Bearing が 0 なら、地図の上端が真北を指していることを意味します。Bearing の値が 90 なら、地図の上端は真東(コンパスで 90 度)を指していることを意味します。値が 180 なら、地図の上端は真南を指します。

Maps API では、地図の Bearing を変更することが可能です。車を運転する人の多くは、道路地図の向きを進行方向に合わせます。一方、地図とコンパスを使用するハイカーの多くは、垂直線が北を指すように地図の向きを調整します。

Tilt(傾斜角、投影角または視角)

Tilt は、マップの中心の真上を通る円弧上にあるカメラの位置として定義され、天底(カメラの真下を指す方向)からの度数で示されます。値が 0 なら、カメラが真下を向いていることを意味します。値を 0 より大きくすると、カメラはその角度の分だけ水平線に向かって円弧上を移動し、傾いていきます。角度を変更すると、遠くをより小さく、近くをより大きく描く透視投影法でマップが表示されます。以下の図でこれを示します。

以下の図の傾斜角は 0 度です。最初の図は、これを図解したものです。位置 1 がカメラの位置で、位置 2 が現在のマップの位置です。その下に、生成されるマップを示します。

傾斜角 0 度(平行投影)で設置したカメラによるズームレベル 18 でのマップのスクリーンショット。
カメラのデフォルトの視野角で表示されている地図。
角度 0 度で、カメラのデフォルト位置であるマップ位置の真上を表示する図。
カメラのデフォルトの表示角度。

以下の図では、傾斜角が 45 度です。カメラが真上(0 度)と地面(90 度)を結ぶ円弧に沿って、位置 3 まで半分移動している点に注意してください。カメラが地図の中心点を指していることに変わりはありませんが、位置 4 の線で表される領域も視界に入っています。

傾斜角 45 度で設置したカメラによるズームレベル 18 での地図のスクリーンショット。
45 度の視野角で表示されている地図。
傾斜角 45 度で設置し、ズームレベルはそのまま 18 に設定されたカメラを示す図
カメラの視野角 45 度。

このスクリーンショットのマップの中心は、元のマップと同じ地点に設定されていますが、マップの上部により多くの対象物が表示されています。角度を 45 度より大きくすると、カメラとマップ位置の間にある対象物が相対的に大きく表示され、マップ位置より後ろにある対象物は相対的に小さく表示されるようになるため、3 次元効果が生まれます。

Zoom

カメラのズームレベルにより、マップの倍率が決まります。ズームレベルが大きいほど画面の表示はより詳細になり、ズームレベルが小さいほど表示される地域が広くなります。ズームレベル 0 では、全世界の幅が約 256 ポイントになるような縮尺の地図が表示されます。

ズームレベルを 1 上げるごとに、画面の世界の幅が 2 倍になります。 したがって、ズームレベル N では、世界の幅は約 256 * 2N ポイントになります。たとえば、ズームレベル 2 では、全世界の幅は約 1,024 ポイントです。

ズームレベルを整数にする必要はありません。マップで許可されるズームレベルの範囲は、Target、地図タイプ、画面サイズといった複数の要因によって決まります。範囲外の数値は、それに最も近い有効な値(最小ズームレベルまたは最大ズームレベル)に変換されます。次のリストは、各ズームレベルで表示されるおおよその詳細度を示しています。

  • 1: 世界
  • 5: 大陸
  • 10: 都市
  • 15: 通り
  • 20: 建物
次の図は、異なるズームレベルの表示結果を示しています。
ズームレベル 5 のマップのスクリーンショット
ズームレベル 5 のマップ。
ズームレベル 15 のマップのスクリーンショット
ズームレベル 15 のマップ。
ズームレベル 20 のマップのスクリーンショット
ズームレベル 20 のマップ。

カメラの初期位置を設定する

GMSCameraPosition オブジェクトを使用して最初のカメラ位置を設定します。これにより、向き、傾斜、ズームとともにターゲットの緯度と経度を設定できます。

初期カメラ位置を設定するには、GMSCameraPosition オブジェクトを作成し、そのオブジェクトを GMSMapView コンビニエンス コンストラクタに渡します。

Swift

let camera = GMSCameraPosition(
  latitude: -33.8683,
  longitude: 151.2086,
  zoom: 16
)
mapView = GMSMapView(frame: self.view.bounds, camera: camera)
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
      

デフォルトの UIView init メソッドを使用して、GMSMapView オブジェクトを作成することもできます。この場合、カメラの位置はデフォルトの場所から始まり、作成後に変更できます。

Swift

mapView = GMSMapView(frame: self.view.bounds)
      

Objective-C

mapView = [[GMSMapView alloc] initWithFrame:self.view.bounds];
      

カメラの位置を変更する

カメラの位置をプログラムで変更して、位置、向き、傾斜、ズームを設定できます。GMSMapView にはカメラ位置の変更に使用できるメソッドがいくつか用意されていますが、通常は GMSCameraPosition または GMSCameraUpdate を使用します。

  • GMSCameraPosition には、すべてのカメラ位置パラメータの変更に使用するプロパティとメソッド(target、bearing、tilt、zoom)が含まれています。

  • GMSCameraUpdate を使用すると、ターゲット、向き、傾斜、ズームを変更できます。また、便利なスクロール方法、高度なズーム、事前定義された境界内のカメラの中心指定などをサポートするメソッドも追加されています。

カメラを移動する際、カメラを新しい位置に「スナップ」するか、つまりアニメーションが存在しないか、動きをアニメーション化するかを選択できます。たとえば、カメラのターゲット位置への変更をアニメーション化すると、アニメーションは古い場所から新しい場所へパンします。

アニメーションによって、現在のカメラ属性から新しいカメラ属性にスムーズに表示が切り替わります。Core Animation を使用して、アニメーションの再生時間を制御できます。

GMSCameraPosition

GMSCameraPosition でカメラを変更するには、新しいオブジェクトを作成するか、既存のオブジェクトをコピーして GMSMapView オブジェクトに設定します。GMSCameraPosition オブジェクトを使用して、アニメーションの有無にかかわらず、カメラを新しい場所にスナップします。

GMSCameraPosition オブジェクトを使用して、緯度、経度、ズーム、向き、視野角などのカメラ プロパティを構成します。次に、そのオブジェクトを使用して GMSMapViewcamera プロパティを設定します。

Swift

let fancy = GMSCameraPosition(
  latitude: -33,
  longitude: 151,
  zoom: 6,
  bearing: 270,
  viewingAngle: 45
)
mapView.camera = fancy
      

Objective-C

GMSCameraPosition *fancy = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                       longitude:151.2086
                                                            zoom:6
                                                         bearing:30
                                                    viewingAngle:45];
[mapView setCamera:fancy];
      

デフォルト値に設定する GMSCameraPosition プロパティは省略します。

移動をアニメーション化するには、camera プロパティを設定する代わりに、animateToCameraPosition: メソッドを使用します。

GMSCameraUpdate

GMSCameraUpdate を使用すると、カメラの位置を更新し、新しい位置にスナップまたはアニメーション化するかどうかを選択できます。GMSCameraUpdate のメリットは利便性です。GMSCameraPosition を使用して GMSCameraUpdate と同じタスクを実行することもできますが、GMSCameraUpdate にはカメラの操作を容易にする追加のヘルパー メソッドが用意されています。

たとえば、GMSCameraPosition を使用して現在のズームレベルをインクリメントするには、まず現在のズームレベルを決定してから、GMSCameraPosition オブジェクトを作成して、現在のズームよりも大きい値にズームを設定します。

または、zoomIn: ファクトリ メソッドを使用して GMSCameraUpdate オブジェクトを作成します。次に、GMSCameraUpdate オブジェクトを GMSMapView animateWithCameraUpdate: メソッドに渡してカメラを更新します。

Swift

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

Objective-C

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

代わりに、GMSMapView moveCamera: メソッドを使用して、カメラを新しい位置にスナップします。

次の例では、GMSCameraUpdate を使用して、バンクーバーを中心とするカメラの移動をアニメーション化します。

Swift

// Center the camera on Vancouver, Canada
let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let vancouverCam = GMSCameraUpdate.setTarget(vancouver)
mapView.animate(with: vancouverCam)
      

Objective-C

// Center the camera on Vancouver, Canada
CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
GMSCameraUpdate *vancouverCam = [GMSCameraUpdate setTarget:vancouver];
[mapView animateWithCameraUpdate:vancouverCam];
      

GMSCameraUpdate オブジェクトを作成する

いずれかのファクトリ メソッドを使用して、GMSCameraUpdate オブジェクトを作成します。

zoomIn:zoomOut:
他のプロパティはすべて変更せずに、現在のズームレベルを 1.0 変更します。
zoomTo:
他のすべてのプロパティを同じに保ちながら、ズームレベルを指定の値に変更します。
zoomBy:
ズームレベルを指定すると、ズームレベルが指定された値だけ上がります(値が負の場合には減少します)。
zoomBy:atPoint:
画面上の指定されたポイントの位置を保持しながら、ズームレベルを指定値分増加(減少させる)します。
setTarget:
他のすべてのプロパティを維持したまま、カメラの緯度と経度を変更します。
setTarget:zoom:
他のすべてのプロパティを維持したまま、カメラの緯度、経度、ズームを変更します。
setCamera:
新しい GMSCameraPosition を設定します。
scrollByX:Y:
指定した緯度と経度で地図を移動するには、カメラの緯度と経度を変更します。正の x 値を指定するとカメラが右に移動するため、地図が左に移動したように見えます。y が正の値の場合、カメラが下に移動するため、地図が上に移動したように見えます。スクロールは、カメラの現在の Bearing を基準とします。たとえば、カメラの Bearing が 90 度の場合、東は「上」です。
fitBounds:
可能な限り最大ズームレベルで、指定した範囲を画面の中央に配置するようにカメラを変換します。64 ポイントの境界にデフォルトのパディングを適用します。
fitBounds:withPadding:
可能な限り最大のズームレベルで、画面の境界を中央に配置するようカメラを変換します。このメソッドを使用して、境界ボックスの上下左右のパディングをポイントで指定します。
fitBounds:withEdgeInsets:
可能な限り最大のズームレベルで、画面の境界を中央に配置するようカメラを変換します。UIEdgeInsets では、境界ボックスの両側にパディングを個別に指定します。

GMSMapView を使用して単一のプロパティを変更する

GMSMapView には、GMSCameraPosition オブジェクトや GMSCameraUpdate オブジェクトを使用せずにカメラを移動するためのメソッドがいくつか用意されています。animateToLocation:animateToZoom: などのメソッドでは、1 つのカメラ プロパティへの変更をアニメーション化できます。

たとえば、toViewingAngle: メソッドを使用してカメラの傾きの変化をアニメーション化します。

Swift

mapView.animate(toViewingAngle: 45)
      

Objective-C

[mapView animateToViewingAngle:45];
      

ターゲットの設定(場所)

位置によって、地図の中心が決まります。ロケーションは緯度と経度で指定し、CLLocationCoordinate2DMake で作成された CLLocationCoordinate2D によってプログラムで表現されます。

GMSCameraPosition を使用して場所を変更します。この例では、地図は新しい位置にスナップされます。

Swift

let target = CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208)
mapView.camera = GMSCameraPosition(target: target, zoom: 6)
      

Objective-C

CLLocationCoordinate2D target =
    CLLocationCoordinate2DMake(-33.868, 151.208);
mapView.camera = [GMSCameraPosition cameraWithTarget:target zoom:6];
      

変更をアニメーション化して地図を新しい場所にパンするには、camera プロパティを設定する代わりに animateToCameraPosition: メソッドを使用します。または、GMSMapViewanimateToLocation: メソッドを使用します。

Swift

mapView.animate(toLocation: CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208))
      

Objective-C

[mapView animateToLocation:CLLocationCoordinate2DMake(-33.868, 151.208)];
      

GMSCameraUpdate オブジェクトを作成して、カメラを移動することもできます。組み込みのメソッド scrollByX:Y: を使用して、カメラを X 方向と Y 方向にスクロールするポイントの数を指定します。この例では、カメラを右に 200 ポイント、下に 100 ポイントスクロールします。

Swift

// Move the camera 200 points to the right, and 100 points downwards
let downwards = GMSCameraUpdate.scrollBy(x: 200, y: 100)
mapView.animate(with: downwards)
      

Objective-C

// Move the camera 200 points to the right, and 100 points downwards
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:200.0 Y:100.0];
[mapView animateWithCameraUpdate:downwards];
      

Bearing(向き)を設定

Bearing は、地図の上端に対する真北からの度数で表されたコンパス方向です。たとえば、方向指定を 90 度にすると、上端が真東を指す地図になります。

GMSCameraPosition または GMSCameraUpdate を使用するか、GMSMapViewanimateToBearing: メソッドを使用して、プログラムで Bearing を設定します。

Swift

mapView.animate(toBearing: 0)
      

Objective-C

[mapView animateToBearing:0];
      

傾斜(表示角度)の設定

視野角は、地図の中心の真上と地表面の間の円弧上にあるカメラの位置で、天底(カメラの真下を指す方向)からの度数で示されます。表示角度を変更すると、地図は遠近法で表示され、カメラと地図の位置の間の対象物が比例して大きく表示され、地図の位置以外の対象物は比例して小さく表示され、3 次元効果が得られます。

表示角度は、0(地図の真下)からズームレベルに依存する最大値までの範囲です。ズームレベル 16 以降の場合、最大角度は 65 度です。ズームレベルが 10 以下の場合、最大角度は 30 度です。

表示角度は、GMSCameraPosition または GMSCameraUpdate を使用してプログラムで設定するか、GMSMapViewanimateToViewingAngle: メソッドを使用します。

Swift

mapView.animate(toViewingAngle: 45)
      

Objective-C

[mapView animateToViewingAngle:45];
      

ズームを設定

カメラのズームレベルにより、マップの倍率が決まります。ズームレベルが大きいほど画面の表示はより詳細になり、ズームレベルが小さいほど表示される地域が広くなります。

GMSCameraPositionGMSCameraUpdate、または GMSMapViewanimateToZoom: メソッドを使用して、プログラムでズームを設定します。

Swift

mapView.animate(toZoom: 12)
      

Objective-C

[mapView animateToZoom:12];
      

次の例では、zoomIn: ファクトリ メソッドを使用して、現在のレベルから 1 レベルだけズームインしたアニメーションを表示する GMSCameraUpdate オブジェクトを作成します。

Swift

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

Objective-C

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

境界線を設定

可能な限り広いズームレベルで関心のあるエリア全体が表示されるようにカメラを移動するには、カメラビューの境界を設定します。たとえば、ユーザーの現在地から 8 km 以内にあるすべてのガソリン スタンドを表示するには、カメラをすべて移動して画面に表示されるようにします。

  1. 画面に表示する GMSCoordinateBounds を計算します。
  2. GMSMapViewcameraForBounds:insets: メソッドを使用して、新しい GMSCameraPosition を返します。

この境界を設定することで、指定した GMSCoordinateBounds が現在の地図のサイズに収まるようになります。このメソッドは、地図の傾斜と方角を 0 に設定します。

次のサンプルでは、バンクーバーとカルガリーの都市が同じビューに表示されるようにカメラを変更する方法を示しています。

Swift

let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let calgary = CLLocationCoordinate2D(latitude: 51.05,longitude: -114.05)
let bounds = GMSCoordinateBounds(coordinate: vancouver, coordinate: calgary)
let camera = mapView.camera(for: bounds, insets: UIEdgeInsets())!
mapView.camera = camera
      

Objective-C

CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
CLLocationCoordinate2D calgary = CLLocationCoordinate2DMake(51.05, -114.05);
GMSCoordinateBounds *bounds =
    [[GMSCoordinateBounds alloc] initWithCoordinate:vancouver coordinate:calgary];
GMSCameraPosition *camera = [mapView cameraForBounds:bounds insets:UIEdgeInsetsZero];
mapView.camera = camera;
      

ユーザーのパンを特定の領域に制限する

上述のシナリオではマップの境界を設定しましたが、ユーザーはこれらの境界の外側にマップをスクロールまたはパンできます。代わりに、地図のフォーカス ポイント(カメラ ターゲット)の緯度/経度の中心境界を制限して、ユーザーがこの境界内でのみスクロールやパンを行えるようにすることをおすすめします。

たとえば、ショッピング センターや空港向けの小売アプリでは、地図を特定の境界に制限して、ユーザーがこれらの境界内でスクロールおよびパンできるようにする必要があります。

パンを特定の境界に制限するには、GMSMapViewcameraTargetBounds プロパティを、必要な境界を定義する GMSCoordinateBounds オブジェクトに設定します。後で制限を削除するには、cameraTargetBounds を nil に設定します。

Swift

mapView.cameraTargetBounds = bounds
      

Objective-C

mapView.cameraTargetBounds = bounds;
      

次の図は、カメラ ターゲットがビューポートより若干大きな領域に制限されている場合のシナリオを示しています。カメラ ターゲットが境界領域内にある場合のみ、ユーザーはスクロールおよびパン操作を行うことができます。X は、カメラ ターゲットを表しています。

ビューポートよりも大きいカメラの境界を示す図。

マップは常にビューポート全体に表示されます。ビューポートは、定義された境界の外側の領域も表示します。たとえば、カメラ ターゲットを境界領域の角に置いた場合、その角を超えた領域もビューポートに表示されますが、ユーザーはその領域にスクロールまたはパンすることはできません。以下の図は、このシナリオを示しています。X はカメラ ターゲットを表しています。

カメラ境界の右下隅に配置されたカメラ ターゲットを示す図。

次の図では、カメラ ターゲットの境界が大幅に制限されており、ユーザーが地図をスクロールまたはパンする機会がほとんどありません。X はカメラ ターゲットを表しています。

ビューポートよりも小さいカメラの境界を示す図。

最小または最大ズームを設定する

グローバル定数の kGMSMinZoomLevelkGMSMaxZoomLevel は、ズームの最小値または最大値を定義します。デフォルトでは、GMSMapViewminZoom プロパティと maxZoom プロパティがこれらの定数に設定されています。

地図で使用できるズームレベルの範囲を制限するには、最小ズームレベルと最大ズームレベルを設定します。次のコードは、ズームレベルを 10 ~ 15 に制限します。

Swift

let camera = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 12
)
let mapView = GMSMapView(frame: .zero, camera: camera)
mapView.setMinZoom(10, maxZoom: 15)
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero
                                        camera:camera];
[mapView setMinZoom:10 maxZoom:15];
      

ズーム範囲は setMinZoom:maxZoom: メソッドを使用して設定する必要があります。ただし、minZoom プロパティと maxZoom プロパティを使用して現在の値を読み取ることができます。この方法は、値を 1 つのみに制限する場合に役立ちます。次のコードは、最小ズームレベルのみを変更します。

Swift

mapView.setMinZoom(12, maxZoom: mapView.maxZoom)
      

Objective-C

[mapView setMinZoom:12 maxZoom:mapView.maxZoom];
      

最小ズームと最大ズームを更新した後でカメラのズームレベルが新しい範囲外の値に設定された場合、現在のズームは自動的に更新され、最も近い有効な値が表示されます。たとえば、以下のコードでは、元のズームは 4 と定義されています。ズーム範囲を後で 10 ~ 15 に設定すると、現在のズームは 10 に更新されます。

Swift

// Sets the zoom level to 4.
let camera2 = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 4
)
let mapView2 = GMSMapView(frame: .zero, camera: camera)

// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)
      

Objective-C

// Sets the zoom level to 4.
GMSCameraPosition *camera2 = [GMSCameraPosition cameraWithLatitude:41.887
                                                         longitude:-87.622
                                                              zoom:4];
GMSMapView *mapView2 = [GMSMapView mapWithFrame:CGRectZero
                                         camera:camera];
// The current zoom, 4, is outside of the range. The zoom will change to 10.
[mapView setMinZoom:10 maxZoom:15];