以上で完了です。

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

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

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

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

図形

Google Maps API for Android では、アプリケーション用にマップをカスタマイズするために、マップに図形を追加するための簡単な方法が提供されます。

  • Polyline は、任意の形状にすることができ、マップ上にパスやルートを示すために使用できる、連結された一連の線分です。

  • Polygon は、マップ上の領域を示すために使用できる、囲まれた図形です。

  • Circle は、マップに描画された地表面上に円を地理的に正確に投影したものです。

これらすべての図形について、いくつかのプロパティを変更することで、その外観をカスタマイズできます。

コードサンプル

GitHub の ApiDemos レポジトリには、図形およびその機能の使い方を示したサンプルが含まれています。

ポリライン

Polyline クラスは、マップ上の連結された線分のセットを定義します。 Polyline オブジェクトは LatLng 位置のセットで構成され、これらの位置を決まった順序で連結する一連の線分を作成します。

このビデオでは、ポリラインを使用して、マップ上にユーザーが目的地にたどり着くためのパスを描く方法を説明しています。

ポリラインを作成するには、まず PolylineOptions オブジェクトを作成し、これにポイントを追加します。 ポイントは地表面上の 1 点を表すもので、LatLng オブジェクトとして表現されます。 線分は、PolylineOptions オブジェクトにポイントを追加した順序に従って、ポイント間に描画されます。

PolylineOptions オブジェクトにポイントを追加するには、PolylineOptions.add() を呼び出します。 このメソッドが取るパラメータの数は可変であるため、一度に複数のポイントを追加できます(ポイントが既にリストに含まれている場合は、PolylineOptions.addAll(Iterable<LatLng>) を呼び出すこともできます)。

次に GoogleMap.addPolyline(PolylineOptions) を呼び出して、マップにポリラインを追加できます。 このメソッドは Polyline オブジェクトを返します。ユーザーはこのオブジェクトを使用して、後でポリラインを変更できます。

次のコード スニペットは、マップに長方形を追加する方法を示しています。

// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions rectOptions = new PolylineOptions()
        .add(new LatLng(37.35, -122.0))
        .add(new LatLng(37.45, -122.0))  // North of the previous point, but at the same longitude
        .add(new LatLng(37.45, -122.2))  // Same latitude, and 30km to the west
        .add(new LatLng(37.35, -122.2))  // Same longitude, and 16km to the south
        .add(new LatLng(37.35, -122.0)); // Closes the polyline.

// Get back the mutable Polyline
Polyline polyline = myMap.addPolyline(rectOptions);

ポリラインを追加した後でその形状を変更するには、Polyline.setPoints() を呼び出して、ポリライン用の新しいポイントのリストを提供します。

ポリラインの外観は、マップに追加する前でも、マップに追加した後でもカスタマイズできます。 詳細については、以下の外観のカスタマイズのセクションをご覧ください。

ポリラインのイベント

デフォルトでは、ポリラインはクリックできません。 クリックを有効および無効にするには、Polyline.setClickable(boolean) を呼び出します。

OnPolylineClickListener を使用して、クリック可能なポリラインでクリック イベントをリッスンします。 マップにこのリスナーを設定するには、GoogleMap.setOnPolylineClickListener(OnPolylineClickListener) を呼び出します。

ユーザーがポリラインをクリックすると、onPolylineClick(Polyline) コールバックを受け取ります。

ポリゴン

Polygon オブジェクトは Polyline オブジェクトと同様、決まった順序で並べられた一連の座標で構成されます。

ただし、ポリゴンは、終端部が開口しているのではなく、内部が塗りつぶされた閉ループ内の領域を定義します。

Polygon は、Polyline を追加するのと同じ方法でマップに追加できます。 まず、PolygonOptions オブジェクトを作成し、これにいくつかのポイントを追加します。 これらのポイントにより、ポリゴンのアウトラインが形成されます。 次に、Polygon オブジェクトを返す GoogleMap.addPolygon(PolygonOptions) を呼び出して、マップにポリゴンを追加します。

次のコード スニペットでは、マップに長方形が追加されます(まだ塗りつぶし色を定義しておらず、デフォルトの塗りつぶし色は透明であるため、これは前述のセクションのスニペットで作成されたポリラインとまったく同じに見えることに注意してください)。

// Instantiates a new Polygon object and adds points to define a rectangle
PolygonOptions rectOptions = new PolygonOptions()
              .add(new LatLng(37.35, -122.0),
                   new LatLng(37.45, -122.0),
                   new LatLng(37.45, -122.2),
                   new LatLng(37.35, -122.2),
                   new LatLng(37.35, -122.0));

// Get back the mutable Polygon
Polygon polygon = myMap.addPolygon(rectOptions);

追加した後でポリゴンの形状を変更するには、Polygon.setPoints() を呼び出して、ポリゴンのアウトライン用の新しいポイントのリストを提供します。

ポリゴンの外観は、マップに追加する前でも、マップに追加した後でもカスタマイズできます。 詳細については、以下の外観のカスタマイズのセクションをご覧ください。

ポリゴンのオートコンプリート

上記の例のポリゴンは 5 つの座標で構成されていますが、最初と最後の座標の位置が同じであるため、ループが定義されています。

実際には、ポリゴンは閉じられた領域を定義するものであるため、この最後の座標を定義する必要はありません。 最後の座標が最初の座標と異なる場合、API により最初の座標が一連の座標の最後に追加され、ポリゴンが自動的に閉じます。

次の 2 つのポリゴンは同等です。各ポリゴンに対して polygon.getPoints() を呼び出すと、4 つのすべてのポイントが返されます。

Polygon polygon = map.addPolygon(new PolygonOptions()
        .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(0, 0))
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE));

Polygon polygon = map.addPolygon(new PolygonOptions()
         .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5))
         .strokeColor(Color.RED)
         .fillColor(Color.BLUE));

中が空洞のポリゴンを作成する

複数のパスを 1 つの Polygon オブジェクトにまとめて、塗りつぶされた輪、つまり「ドーナツ」(ポリゴンの内部にポリゴン領域が「島」状に表示されているもの)などの複雑な図形を作成できます。

複雑な図形は必ず複数のより単純なパスで構成されています。

2 つのパスは同じ領域内に定義される必要があります。 2 つの領域のうち、大きい方が塗りつぶし領域を定義します。この領域は、追加オプションなしの単純なポリゴンです。

次に、2 つ目のパスを addHole() メソッドに渡します。 2 つ目の小さい方のパスが、大きい方のパスで完全に囲まれている場合、ポリゴンの一部が削除されているかのように見えます。

穴がポリゴンのアウトラインと交差している場合、ポリゴンは塗りつぶされずにレンダリングされます。

次のスニペットでは、それより小さい長方形の穴が開いている、1 つの長方形が作成されます。

mMap.addPolygon(new PolygonOptions()
        .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(3, 0), new LatLng(0, 0))
        .addHole(new LatLng(1, 1), new LatLng(1, 2), new LatLng(2, 2), new LatLng(2, 1), new LatLng(1, 1))
        .fillColor(Color.BLUE));

ポリゴン のイベント

デフォルトでは、ポリゴンはクリックできません。 クリックを有効および無効にするには、Polygon.setClickable(boolean) を呼び出します。

OnPolygonClickListener を使用して、クリック可能なポリゴンでクリック イベントをリッスンします。 マップにこのリスナーを設定するには、GoogleMap.setOnPolygonClickListener(OnPolygonClickListener) を呼び出します。

ユーザーがポリゴンをクリックすると、onPolygonClick(Polygon) コールバックを受け取ります。

汎用の Polygon クラスに加え、Maps API には Circle オブジェクトに対する特別なクラスも用意されており、円を簡単に作成することができます。

円を作成するには、次の 2 つのプロパティを指定する必要があります。

  • centerLatLng として指定します。
  • radius をメートル単位で指定します。

これにより、指定された center から radius メートルの地点にある、地表面上のすべてのポイントのセットとして円が定義されます。 Maps API で使用されているメルカトル図法では、地球が平面上にレンダリングされるため、この円はマップの赤道付近ではほぼ完全な円として表示されますが、円が赤道から遠ざかるにつれて、(画面上の表示では)歪んだ円となっていきます。

次のコード スニペットでは、CircleOptions オブジェクトを作成し、GoogleMap.addCircle(CircleOptions) を呼び出すことで、マップに円が追加されます。

// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000)); // In meters

// Get back the mutable Circle
Circle circle = myMap.addCircle(circleOptions);

円を追加した後でその形状を変更するには、Circle.setRadius() または Circle.setCenter() を呼び出して、新しい値を提供します。

円の外観は、マップに追加する前でも、マップに追加した後でもカスタマイズできます。 詳細については、以下の外観のカスタマイズのセクションをご覧ください。

円のイベント

デフォルトでは、円はクリックできません。 クリックを有効および無効にするには、GoogleMap.addCircle()CircleOptions.clickable(boolean) とともに呼び出すか、 Circle.setClickable(boolean) を呼び出します。

OnCircleClickListener を使用して、クリック可能な円でクリック イベントをリッスンします。 マップにこのリスナーを設定するには、GoogleMap.setOnCircleClickListener(OnCircleClickListener) を呼び出します。

ユーザーが円をクリックすると、次のコードサンプルに示すように onCircleClick(Circle) コールバックを受け取ります。

public class MyActivity extends FragmentActivity
        implements OnMapReadyCallback {

        private GoogleMap mMap;
        private Circle circle;

        @Override
        public void onMapReady(GoogleMap map) {
            mMap = map;

            circle = mMap.addCircle(new CircleOptions()
                .center(new LatLng(37.4, -122.1))
                .radius(1000)
                .strokeWidth(10)
                .strokeColor(Color.GREEN)
                .fillColor(Color.argb(128, 255, 0, 0))
                .clickable(true);

            map.setOnCircleClickListener(new OnCircleClickListener() {

                @Override
                public void onCircleClick(Circle circle) {
                    // Flip the r, g and b components of the circle's
                    // stroke color.
                    int strokeColor = circle.getStrokeColor() ^ 0x00ffffff;
                    circle.setStrokeColor(strokeColor);
                }
            });
        }
}

外観のカスタマイズ

図形の外観は、マップに図形を追加する前でも(オプション オブジェクトで必要なプロパティを指定して)、マップに追加した後でも変更できます。

すべてのプロパティについて getter も公開されているため、図形の現在の状態に簡単にアクセスできます。

次のスニペットでは、メルボルンからパースへの測地線セグメントを持つ濃い青色のポリラインが追加されます。 次のセクションでは、これらのプロパティの詳細について説明します。

Polyline line = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

注: これらのプロパティのほとんどは、ここで説明するどの図形にも適用できますが、プロパティの中には特定の図形では意味を持たないものもあります(たとえば、ポリラインには内部がないため、塗りつぶし色を指定することはできません)。

ストローク色

ストローク色は 32 ビットの ARGB(alpha、red、green、blue)整数で、図形のストロークの不透明度と色を指定します。 *Options.strokeColor()(またはポリラインの場合は PolylineOptions.color())を呼び出して、図形のオプション オブジェクトでこのプロパティを設定します。

指定しない場合のデフォルトのストローク色は黒(Color.BLACK)です。

図形がマップに追加されたら、getStrokeColor()(またはポリラインの場合は getColor())を呼び出してストローク色にアクセスしたり、setStrokeColor()setColor() for a polyline)を呼び出してストローク色を変更したりできます。

塗りつぶし色

塗りつぶし色はポリゴンと円にのみ適用されます。 ポリラインには内部が定義されていないため、ポリラインには適用されません。 ポリゴンの場合、その穴の内側の領域はポリゴンの内部には含まれないため、塗りつぶし色が設定されていても色付けされません。

塗りつぶし色は 32 ビットの ARGB(alpha、red、green、blue)整数で、図形の内部の不透明度と色を指定します。 *Options.fillColor() を呼び出して、図形のオプション オブジェクトでこのプロパティを設定します。 指定しない場合のデフォルトのストローク色は透明(Color.TRANSPARENT)です。

図形をマップに追加したら、getFillColor() を呼び出して塗りつぶし色にアクセスしたり、setFillColor() を呼び出して塗りつぶし色を変更したりできます。

ストローク幅

線のストローク幅は、ピクセル (px)単位の浮動小数で指定されます。 この幅は、マップがズームされても拡大縮小されません(つまり、図形はすべてのズームレベルで同じストローク幅を持ちます)。 *Options.strokeWidth()(または、ポリラインの場合は PolylineOptions.width())を呼び出して、図形のオプション オブジェクトでこのプロパティを設定します。

指定しない場合のデフォルトのストローク幅は 10 ピクセルです。

図形をマップに追加したら、getStrokeWidth()(または、ポリラインの場合は getWidth())を呼び出してストローク幅にアクセスしたり、setStrokeWidth()setWidth() for a polyline)を呼び出してストローク幅を変更したりできます。

測地線セグメント

測地線設定は、ポリラインとポリゴンにのみ適用されます。 円はセグメントの集合として定義されていないため、これは円には適用されません。

測地線設定は、ポリラインまたはポリゴンの連続する頂点間での線分の描画方法を決定します。 測地線セグメントは、地表面(球体)に沿った最短のパスに従うセグメントで、メルカトル図法を使用しているマップでは多くの場合、曲線として表示されます。

非測地線セグメントは、マップ上に直線として描画されます。

*Options.geodesic() を呼び出して、図形のオプション オブジェクトでこのプロパティを設定します。true はセグメントを測地線として描画することを示し、false はセグメントを直線として描画することを示します。

指定しない場合のデフォルトは、非測地線セグメント(false)です。

図形をマップに追加したら、isGeodesic() を呼び出して測地線設定にアクセスしたり、setGeodesic() を呼び出して測地線設定を変更したりできます。

z インデックス

z インデックスは、マップ上の他のオーバーレイ(その他の図形、地面オーバーレイ、タイル オーバーレイ)と相対的な、この図形の重ね順序を指定します。

高い z インデックスを持つオーバーレイは、より低い z インデックスを持つオーバーレイより上に描画されます。 同じ z インデックスを持つ 2 つのオーバーレイは、任意の順序で描画されます。

マーカーは、他のオーバーレイの z インデックスと関係なく、常に他のオーバーレイの上に描画されます。

*Options.zIndex() を呼び出して、図形のオプション オブジェクトでこのプロパティを設定します。 指定しない場合のデフォルトの z インデックスは 0 です。 図形をマップに追加したら、getZIndex() を呼び出して z インデックスにアクセスしたり、setZIndex() を呼び出して z インデックスを変更したりできます。

可視性

可視性は、図形をマップに描画するかどうかを指定します。true は描画することを示し、false は描画しないことを示します。 これを使用して、マップ上で一時的に図形を非表示にできます。 マップから図形を完全に削除するには、その図形で remove() を呼び出します。

*Options.visible() を呼び出して、図形のオプション オブジェクトでこのプロパティを設定します。 指定しない場合のデフォルトの可視性は true です。 マップに図形を追加したら、isVisible() を呼び出して可視性にアクセスしたり、setVisible() を呼び出して可視性を変更したりできます。

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

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