以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps Android API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps Android API をアクティベートする
  3. 適切なキーを作成する
続ける

Google マップ Android マーカー クラスタリング ユーティリティ

マーカーをクラスタリングすることで、マップを見づらくすることなく、マップ上に多数のマーカーを配置できます。

はじめに

このビデオでは、マップ上に多数のデータポイントが必要な場合のマーカー クラスリングの使用について説明しています。

マーカー クラスタリング ユーティリティを使用すると、異なるズームレベルにある複数のマーカーを管理できます。正確には、「マーカー」はこの時点では実際には「アイテム」で、レンダリングされるときに初めて「マーカー」になります。ただし、わかりやすくするために、このドキュメントでは一貫してこれらを「マーカー」と呼びます。

ユーザーが高いズームレベルでマップを表示すると、個別のマーカーがマップ上に表示されます。ユーザーがズームアウトすると、マーカーがまとまってクラスターになり、マップが見やすくなります。マーカー クラスタリング ユーティリティは、Google Maps Android API Utility Library に含まれています。ライブラリをまだセットアップしていない場合は、このページの残りを読む前に、セットアップ ガイドに従ってセットアップしてください。

クラスタリングされたマーカーのあるマップ
クラスタリングされたマーカー

マーカー クラスタリング ユーティリティを使用するには、マーカーを ClusterItem オブジェクトとして ClusterManager に追加する必要があります。ClusterManager はマーカーを Algorithm に渡し、これによりマーカーが一連のクラスターに変換されます。ClusterRenderer は、クラスターと個別のマーカーを追加および削除することで、レンダリングを行います。ClusterRendererAlgorithm は柔軟で、カスタマイズ可能です。

ユーティリティ ライブラリには、マーカー クラスタリング ユーティリティのサンプル実装を提供するデモアプリが付属しています。デモアプリの実行方法については、セットアップ ガイドをご覧ください。デモアプリには、次のマーカー クラスタリング サンプルが含まれています。

  • ClusteringDemoActivity:マーカー クラスタリングを示す単純なアクティビティ。
  • BigClusteringDemoActivity:2 000 個のマーカーのクラスタリング。
  • CustomMarkerClusteringDemoActivity:クラスタリングされたマーカーのカスタム デザインの作成。

単純なマーカー クラスターを追加する

次のステップに従って、10 個のマーカーからなる単純なクラスターを作成します。結果は以下のようになります。ただし、表示またはクラスタリングされているマーカーの数は、ズームレベルによって異なります。

10 個のクラスタリングされたマーカーのあるマップ
10 個のクラスタリングされたマーカー

必要なステップの概要は次のとおりです。

  1. マップ上のマーカーを表すために、ClusterItem を実装します。クラスター アイテムにより、マーカーの位置が LatLng オブジェクトとして返されます。
  2. ズームレベルに基づいてクラスター アイテム(マーカー)をグループ化するために、新しい ClusterManager を追加します。
  3. ClusterManager はリスナーを実装するため、マップの OnCameraIdleListener()ClusterManager に設定します。
  4. マーカー クリック イベントへのレスポンスで特定の機能を追加する場合は、マップの OnMarkerClickListener()ClusterManager に設定します。これは、ClusterManager がリスナーを実装するためです。
  5. マーカーを ClusterManager に入力します。

次に、各ステップの詳細を示します。10 個のマーカーからなる単純なクラスターを作成するには、まず、ClusterItem を実装する MyItem クラスを作成します。

public class MyItem implements ClusterItem {
    private final LatLng mPosition;

    public MyItem(double lat, double lng) {
        mPosition = new LatLng(lat, lng);
    }

    @Override
    public LatLng getPosition() {
        return mPosition;
    }
}

マップ アクティビティで、ClusterManager を追加し、これにクラスター アイテムを入力します。ClusterManagerMyItem 型であることを宣言する型引数 <MyItem> に注目してください。

// Declare a variable for the cluster manager.
private ClusterManager<MyItem> mClusterManager;

private void setUpClusterer() {
    // Position the map.
    getMap().moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(51.503186, -0.126446), 10));

    // Initialize the manager with the context and the map.
    // (Activity extends context, so we can pass 'this' in the constructor.)
    mClusterManager = new ClusterManager<MyItem>(this, getMap());

    // Point the map's listeners at the listeners implemented by the cluster
    // manager.
    getMap().setOnCameraIdleListener(mClusterManager);
    getMap().setOnMarkerClickListener(mClusterManager);

    // Add cluster items (markers) to the cluster manager.
    addItems();
}

private void addItems() {

    // Set some lat/lng coordinates to start with.
    double lat = 51.5145160;
    double lng = -0.1270060;

    // Add ten cluster items in close proximity, for purposes of this example.
    for (int i = 0; i < 10; i++) {
        double offset = i / 60d;
        lat = lat + offset;
        lng = lng + offset;
        MyItem offsetItem = new MyItem(lat, lng);
        mClusterManager.addItem(offsetItem);
    }
}

マーカー クラスターをカスタマイズする

ClusterManager コンストラクタは、DefaultClusterRendererNonHierarchicalDistanceBasedAlgorithm を作成します。ClusterManagersetAlgorithm(Algorithm<T> algorithm) メソッドと setRenderer(ClusterRenderer<T> view) メソッドを使用して、ClusterRendererAlgorithm を変更できます。

ClusterRenderer を実装すると、クラスターのレンダリングをカスタマイズできます。DefaultClusterRenderer は開始点として適しています。DefaultClusterRenderer をサブクラス化することで、デフォルトを上書きできます。

カスタマイズの詳細な例は、ユーティリティ ライブラリに付属のデモアプリにある CustomMarkerClusteringDemoActivity をご覧ください。

カスタムのクラスタリングされたマーカーのあるマップ
カスタムのクラスタリングされたマーカー

CustomMarkerClusteringDemoActivity は、独自のクラスター アイテム Person を定義し、DefaultClusterRendererPersonRenderer として拡張することで、このアイテムをレンダリングします。

デモでは、ClusterManager.OnClusterClickListener<Person> インターフェースを実装して、クラスターがクリックされたときに、その人に関する詳細情報を表示する方法も示されています。ClusterManager.OnClusterItemClickListener<Person> も同様の方法で実装できます。

デモアプリの実行方法については、セットアップ ガイドをご覧ください。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。