Google Maps Platform に間もなく新しい地図のスタイルが導入されます。このアップデートにより、デフォルトのカラーパレットが新しくなるほか、地図のエクスペリエンスとユーザビリティが改善されます。すべての地図のスタイルは、2025 年 3 月に自動的に更新されます。ご利用の詳細およびいち早く使用する方法については、Google Maps Platform の新しい地図のスタイルをご覧ください。

このページは Cloud Translation API によって翻訳されました。

ヒートマップ

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

このページでは、Maps SDK for iOS のユーティリティライブラリで利用できるヒートマップユーティリティについて説明します。ヒートマップは、マップ上のデータポイントの分布と密度を表すのに役立ちます。

この動画では、マップ上に多数のデータポイントが必要なデータの場合に、マーカーの代わりとしてヒートマップを使用する方法を説明します。

ヒートマップを使用すると、マップ上のデータポイントの分布と相対密度を閲覧者にわかりやすく示すことができます。各場所にマーカーを配置するのではなく、ヒートマップでは色を使用してデータの分布を表します。

次の例では、オーストラリアのビクトリアにおいて、警察署の密度が高い地域が赤で表されています。

警察署の場所を示すヒートマップが表示されているマップ — マップ上のヒートマップ

ライブラリをまだセットアップしていない場合は、このページの残りを読む前に、設定ガイドに従ってセットアップしてください。

単純なヒートマップの追加

マップにヒートマップを追加するには、対象の位置それぞれを示す座標のデータセットが必要です。まず、GMUHeatmapTileLayer インスタンスを作成し、map プロパティを GMSMapView に設定します。アプリの viewDidLoad() 関数でこれを行うと、ヒートマップを使用する前にベースマップが読み込まれます。次に、GMUWeightedLatLng オブジェクトのコレクションを GMUHeatmapTileLayer インスタンスに渡します。

このユーティリティは、GMUWeightedLatLng オブジェクトのコレクションを受け入れる GMUHeatmapTileLayer クラスを提供します。これにより、さまざまなズームレベルのタイル画像が、指定された半径、グラデーション、不透明度のオプションに基づいて作成されます。

次に、各ステップの詳細を示します。

GMUHeatmapTileLayer インスタンスを作成し、map プロパティを GMSMapView に設定します（この操作はアプリの viewDidLoad() 関数で行います）。
GMUWeightedLatLng オブジェクトのコレクションを GMUHeatmapTileLayer インスタンスに渡します。

地図ビューを渡して GMUHeatmapTileLayer.map を呼び出します。

Swift

class Heatmap: UIViewController {

  private var mapView: GMSMapView!
  private var heatmapLayer: GMUHeatmapTileLayer!

  override func viewDidLoad() {
    super.viewDidLoad()
    heatmapLayer = GMUHeatmapTileLayer()
    heatmapLayer.map = mapView
  }

  // ...

  func addHeatmap() {

    // Get the data: latitude/longitude positions of police stations.
    guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
      return
    }
    guard let data = try? Data(contentsOf: path) else {
      return
    }
    guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
      return
    }
    guard let object = json as? [[String: Any]] else {
      print("Could not read the JSON.")
      return
    }

    var list = [GMUWeightedLatLng]()
    for item in object {
      let lat = item["lat"] as! CLLocationDegrees
      let lng = item["lng"] as! CLLocationDegrees
      let coords = GMUWeightedLatLng(
        coordinate: CLLocationCoordinate2DMake(lat, lng),
        intensity: 1.0
      )
      list.append(coords)
    }

    // Add the latlngs to the heatmap layer.
    heatmapLayer.weightedData = list
  }
}

Objective-C

@implementation Heatmap {
  GMSMapView *_mapView;
  GMUHeatmapTileLayer *_heatmapLayer;
}

- (void)viewDidLoad {
  [super viewDidLoad];
  _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
  _heatmapLayer.map = _mapView;
}

// ...

- (void) addHeatmap {

  // Get the data: latitude/longitude positions of police stations.
  NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
  NSData *data = [NSData dataWithContentsOfURL:path];
  NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];

  NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
  [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    NSDictionary *item = (NSDictionary *)obj;
    CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
    CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
    GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                    intensity:1.0];
    [list addObject:coords];
  }];


  // Add the latlngs to the heatmap layer.
  _heatmapLayer.weightedData = list;
}
@end

この例では、データは JSON ファイル police_stations.json に保存されています。ファイルの抜粋を以下に示します。

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]