以上で完了です。

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

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

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

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

マーカー

マーカーは、マップ上の単一の場所を示します。 デフォルト色を変更したり、マーカー アイコンをカスタム画像で置き換えたりして、マーカーをカスタマイズできます。

情報ウィンドウを使用すると、マーカーにコンテキストを追加できます。

コードサンプル

GitHub の ApiDemos レポジトリには、各種のマーカーの機能を示すサンプルが含まれています。

はじめに

マーカーは、マップ上の場所を示します。 デフォルト マーカーは、Google マップの外観に共通の標準アイコンを使用します。 API を使用して、アイコンの色、画像、アンカー ポイントを変更できます。 マーカーはタイプが Marker のオブジェクトであり、GoogleMap.addMarker(markerOptions) メソッドによりマップに追加されます。

マーカーは、インタラクティブに動作するように設計されています。 これらはデフォルトで click イベントを受け取り、多くの場合情報ウィンドウを起動するためのイベント リスナーとともに使用されます。

マーカーの draggable プロパティを true に設定すると、ユーザーがマーカーの位置を変更できるようになります。 マーカーを移動させる機能をアクティブにするには長押しします。

デフォルトでは、ユーザーがマーカーをタップすると、マップ ツールバーがマップの右下に表示されます。ユーザーはここから Google マップ モバイル アプリにすばやくアクセスできます。

ツールバーは無効にすることができます。 詳細については、コントロールのガイドをご覧ください。

マーカーのスタートガイド

Maps Live のこのエピソードでは、Google Maps Android API を使用してマップにマーカーを追加する場合の基本について説明しています。

マーカーを追加する

次の例は、マップにマーカーを追加する方法を示しています。 マーカーは座標 10,10 で作成され、クリックされると情報ウィンドウに「Hello world」という文字列を表示します。

@Override
public void onMapReady(GoogleMap map) {
    map.addMarker(new MarkerOptions()
        .position(new LatLng(10, 10))
        .title("Hello world"));
}

マーカーの追加情報を表示する

ユーザーがマップ上のマーカーをタップするとき、一般的な要件はプレイスや場所の追加情報を表示することです。 情報ウィンドウのガイドをご覧ください。

マーカーにデータを関連付ける

このコードサンプルのように、Marker.setTag() を使用してマーカーに任意のデータ オブジェクトを保存し、Marker.getTag() を使用してデータ オブジェクトを取得できます。

/**
 * A demo class that stores and retrieves data objects with each marker.
 */
public class MarkerDemoActivity extends FragmentActivity implements
        OnMarkerClickListener,
        OnMapReadyCallback {

    private static final LatLng PERTH = new LatLng(-31.952854, 115.857342);
    private static final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
    private static final LatLng BRISBANE = new LatLng(-27.47093, 153.0235);

    private Marker mPerth;
    private Marker mSydney;
    private Marker mBrisbane;

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.marker_demo);

        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /** Called when the map is ready. */
    @Override
    public void onMapReady(GoogleMap map) {
        mMap = map;

        // Add some markers to the map, and add a data object to each marker.
        mPerth = mMap.addMarker(new MarkerOptions()
                .position(PERTH)
                .title("Perth");
        mPerth.setTag(0);

        mSydney = mMap.addMarker(new MarkerOptions()
                .position(SYDNEY)
                .title("Sydney");
        mSydney.setTag(0);

        mBrisbane = mMap.addMarker(new MarkerOptions()
                .position(BRISBANE)
                .title("Brisbane");
        mBrisbane.setTag(0);

        // Set a listener for marker click.
        mMap.setOnMarkerClickListener(this);
    }

    /** Called when the user clicks a marker. */
    @Override
    public boolean onMarkerClick(final Marker marker) {

        // Retrieve the data from the marker.
        Integer clickCount = (Integer) marker.getTag();

        // Check if a click count was set, then display the click count.
        if (clickCount != null) {
            clickCount = clickCount + 1;
            marker.setTag(clickCount);
            Toast.makeText(this,
                           marker.getTitle() +
                           " has been clicked " + clickCount + " times.",
                           Toast.LENGTH_SHORT).show();
        }

        // Return false to indicate that we have not consumed the event and that we wish
        // for the default behavior to occur (which is for the camera to move such that the
        // marker is centered and for the marker's info window to open, if it has one).
        return false;
    }
}

次に、マーカーを使用してデータを保存および取得する方法が有用なシナリオの例をいくつか上げます。

  • アプリでさまざまなタイプのマーカーを提供し、ユーザーがマーカーをクリックしたときにそれぞれ異なる処理を実行する。 これを実現するには、タイプを示す String をマーカーに保存します。

  • 固有のレコード識別子を持つシステムと連携し、マーカーでシステムの特定のレコードを表す。

  • マーカー データで、マーカーの Z インデックスの決定に使用する優先度を指定する。

マーカーをドラッグ可能にする

マーカーの draggable プロパティが true に設定されていれば、マップに追加した後で、マーカーの位置を変更できます。 マーカーを長押しすると、ドラッグが有効になります。 画面から指を離すと、マーカーはその位置に留まります。

マーカーはデフォルトではドラッグできません。 マーカーをマップに追加する前に MarkerOptions.draggable(boolean) を使用するか、マップに追加した後で Marker.setDraggable(boolean) を使用して、マーカーを明示的にドラッグ可能に設定する必要があります。

マーカー ドラッグ イベントで説明しているように、マーカーでドラッグ イベントをリッスンできます。

以下のスニペットでは、オーストラリアのパースにドラッグ可能なマーカーが追加されます。

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .draggable(true));

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

このビデオは、マーカーを使用してマップ上の場所を視覚化する方法を示しています。

マーカーでは、デフォルト アイコンの代わりに表示するカスタム画像を定義できます。 アイコンの定義には、マーカーの視覚動作に影響するいくつかのプロパティの設定が必要となります。

マーカーでは、次のプロパティを使用したカスタマイズがサポートされています。

position(必須)
マーカーのマップ上の場所を示す LatLng 値。 これは、Marker オブジェクトで唯一の必須プロパティです。
anchor
マーカーの LatLng の位置に配置される画像上のポイント。 デフォルト値は、画像の下部中央です。
alpha
マーカーの不透明度を設定します。 デフォルト値は 1.0 です。
title
ユーザーがマーカーをタップしたときに、情報ウィンドウに表示される文字列。
snippet
タイトルの下に表示される追加テキスト。
icon
デフォルトのマーカー画像の代わりに表示されるビットマップ。
draggable
ユーザーがマーカーを動かせるようにする場合は、true に設定します。 デフォルト値は false です。
visible
マーカーを非表示にする場合は、false に設定します。 デフォルト値は true です。
フラットまたはビルボードの向き
デフォルトでは、マーカーは画面に平行に配置され、カメラの動きに合わせて回転したりチルトしたりしません。 フラット マーカーは地表面に平行に配置されるため、カメラの動きに合わせて回転したりチルトしたりします。 いずれのタイプのマーカーも、ズームしてもサイズは変わりません。 この効果が必要な場合は、GroundOverlays を使用してください。
rotation
時計回りの角度で指定される、マーカーの向き。 マーカーがフラットの場合は、デフォルトの位置が変化します。 フラット マーカーのデフォルト位置は、北に合わせられます。 マーカーがフラットでない場合、デフォルト位置は上向きで、マーカーが常にカメラに対して正面を向くように回転されます。

以下のスニペットでは、デフォルト アイコンを使用する単純なマーカーが作成されます。

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE));

マーカーの色をカスタマイズする

BitmapDescriptor オブジェクトを icon() メソッドに渡して、デフォルトのマーカー画像の色をカスタマイズできます。 BitmapDescriptorFactory オブジェクトで事前定義されている色を使用するか、BitmapDescriptorFactory.defaultMarker(float hue) メソッドを使用してカスタム マーカー色を設定できます。

hue は 0 から 360 までの値で、カラーホイール上の点を表します。

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));

マーカーの不透明度をカスタマイズする

MarkerOptions.alpha() メソッドを使用して、マーカーの不透明度を制御できます。 alpha は 0.0 から 1.0 までの浮動小数で指定する必要があります。0 は完全に透明で、1 は完全に不透明です。

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .alpha(0.7f));

マーカー画像をカスタマイズする

デフォルトのマーカー画像を、通常はアイコンと呼ばれるカスタム マーカー画像で置き換えることができます。 カスタム アイコンは常に BitmapDescriptor として設定され、BitmapDescriptorFactory クラスのいずれかのメソッドを使用して定義されます。

fromAsset(String assetName)
assets ディレクトリのビットマップ画像の名前を使用して、カスタム マーカーを作成します。
fromBitmap(Bitmap image)
ビットマップ画像からカスタム マーカーを作成します。
fromFile(String fileName)
内部ストレージにあるビットマップ画像ファイルの名前を使用して、カスタム アイコンを作成します。
fromPath(String absolutePath)
ビットマップ画像の絶対ファイルパスからカスタム マーカーを作成します。
fromResource(int resourceId)
ビットマップ画像のリソース ID を使用してカスタム マーカーを作成します。

以下のスニペットでは、カスタム アイコンを持つマーカーが作成されます。

  private static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
  private Marker melbourne = mMap.addMarker(new MarkerOptions()
                            .position(MELBOURNE)
                            .title("Melbourne")
                            .snippet("Population: 4,137,400")
                            .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

マーカーをフラット化する

マーカー アイコンは通常、画面に平行に描画され、マップを回転、チルト、ズームしてもマーカーの向きは変わりません。 地面に対して平行になるようにマーカーの向きを設定できます。 このように向きが設定されたマーカーは、マップが回転されると回転し、マップがチルトされると視点が変化します。

マップがズームインまたはズームアウトされても、フラット マーカーのサイズは変わりません。

マーカーの向きを変更するには、マーカーの flat プロパティを true に設定します。

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .flat(true));

マーカーを回転する

Marker.setRotation() メソッドを使用して、マーカーをそのアンカー ポイントを中心に回転させることができます。 回転は、デフォルト位置を基準とした時計回りの度数で示されます。 マップ上のマーカーがフラットな場合、デフォルト位置は北です。 マーカーがフラットではない場合、デフォルト位置は上向きで、マーカーが常にカメラに対して正面を向くように回転されます。

次の例では、マーカーが 90° 回転されます。 アンカー ポイントを 0.5,0.5 に設定すると、マーカーは基部ではなく、中央を中心として回転されます。

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .anchor(0.5,0.5)
                          .rotation(90.0));

マーカーの Z インデックス

Z インデックスは、マップ上の他のマーカーに対する相対値で、このマーカーのスタック順序を指定します。 Z インデックス値が高いマーカーは、Z インデックス値が低いマーカーの上に描画されます。 デフォルトの Z インデックス値は 0 です。

次のコード スニペットのように、MarkerOptions.zIndex() を呼び出して、マーカーのオプションのオブジェクトに Z インデックスを設定します。

@Override
public void onMapReady(GoogleMap map) {
    map.addMarker(new MarkerOptions()
        .position(new LatLng(10, 10))
        .title("Marker z1")
        .zIndex(1.0f));
}

マーカーの Z インデックスにアクセスするには Marker.getZIndex() を呼び出します。Z インデックス値を変更するには Marker.setZIndex() を呼び出します。

マーカー以外のその他のオーバーレイ(地面オーバーレイ、ポリライン、ポリゴン、その他のシェイプ)の Z インデックスにかかわらず、マーカーは常に、タイルレイヤおよびマーカー以外のその他のオーバーレイの上に描画されます。

マーカーは実際に、その他のオーバーレイから独立した Z インデックス グループと見なされます。

以下のクリック イベントでの Z インデックスの効果をご覧ください。

マーカー イベントを処理する

Maps API を使用すると、マーカー イベントをリッスンして、応答できます。 これらのイベントをリッスンするには、マーカーが属する GoogleMap オブジェクトで対応するリスナーを設定する必要があります。

マップ上のいずれかのマーカーでイベントが発生すると、リスナーのコールバックが呼び出され、対応する Marker オブジェクトがパラメータとして渡されます。

この Marker オブジェクトと Marker オブジェクトへの独自の参照を比較するには、== ではなく equals() を使用する必要があります。

次のイベントをリッスンできます。

マーカー クリック イベント

OnMarkerClickListener を使用して、マーカーでのクリック イベントをリッスンできます。 マップでこのリスナーを設定するには、GoogleMap.setOnMarkerClickListener(OnMarkerClickListener) を呼び出します。 ユーザーがマーカーをクリックすると、onMarkerClick(Marker) が呼び出され、マーカーが引数として渡されます。

このメソッドは、ユーザーがそのイベントを消費したかどうか(つまり、デフォルト動作が行われないようにする必要があるかどうか)を示す Boolean 型の値を返します。

false が返された場合は、カスタム動作に加えてデフォルト動作が行われます。 マーカー クリック イベントのデフォルト動作は、その情報ウィンドウ(使用可能な場合)を表示し、マーカーがマップの中央に配置されるようにカメラを移動することです。

クリック イベントでの Z インデックスの効果:

  • ユーザーがマーカーのクラスターをクリックすると、Z インデックスが最も大きいマーカーのクリック イベントがトリガーされます。

  • 1 回のクリックにつき最大 1 つのイベントがトリガーされます。 つまりクリックは、小さい Z インデックス値を持つマーカーまたはその他のオーバーレイには渡されません。

  • マーカーのクラスターをクリックすると、それ以降のクリックでクラスターを循環し、各マーカーを順番に選択します。 循環の順序は、まず Z インデックスが優先され、その次に、クリックした場所に対する距離の近さです。

  • ユーザーがクラスターの近接領域の外側をクリックすると、API はクラスターを再計算してクリックの循環状態をリセットし、最初からスタートします。

  • 循環を再開するまでは、クリックイベントはマーカークラスターからその他のシェイプやオーバーレイへと作用します。

  • マーカーは実際、その他のオーバーレイやシェイプ(ポリライン、ポリゴン、円、地面オーバーレイ)の Z インデックスにかかわらず、その他のオーバーレイから独立した Z インデックス グループと見なされます。

複数のマーカー、オーバーレイまたはシェイプが重なり合っている場合、クリック イベントは最初にマーカーのクラスターを循環してから、Z インデックス値に基づいて、他のクリック可能なオーバーレイまたはシェイプに対してトリガーされます。

マーカー ドラッグ イベント

OnMarkerDragListener を使用して、マーカーでのドラッグ イベントをリッスンできます。 マップでこのリスナーを設定するには、GoogleMap.setOnMarkerDragListener を呼び出します。 マーカーをドラッグするには、ユーザーはマーカーを長押しする必要があります。 ユーザーが画面から指を離すと、マーカーはその位置に留まります。 マーカーがドラッグされると、最初は onMarkerDragStart(Marker) が呼び出されます。 マーカーがドラッグされている間は、onMarkerDrag(Marker) が常に呼び出されています。 ドラッグの最後には、onMarkerDragEnd(Marker) が呼び出されます。 Marker.getPosition() を呼び出すと、いつでもマーカーの位置を取得できます。

注: デフォルトでは、マーカーはドラッグできません。 ユーザーがマーカーをドラッグできるようにするには、マーカーを明示的にドラッグ可能に設定しておく必要があります。 これは、マップにマーカーを追加する前に MarkerOptions.draggable(boolean) を使用するか、マップにマーカーを追加した後で Marker.setDraggable(boolean) を使用して設定できます。

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

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