以上で完了です。

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

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

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

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

スタイル化されたマップの追加

このチュートリアルでは、カスタム スタイル設定を施したマップを Android アプリに追加する方法を説明します。 このチュートリアルでは、カスタム スタイリングの例としてナイトモードを使用しています。

スタイル オプションを使用すると、道路、公園、企業や店舗、その他の有名スポットなどの地物の視覚表示を変更して、標準の Google マップの表現スタイルをカスタマイズできます。 これにより、マップの特定のコンポーネントを強調したり、マップをアプリのスタイルに合わせたりすることができます。

スタイル設定は、normal マップ タイプでのみ機能します。

コードを取得する

GitHub から Google Maps Android API v2 Samples リポジトリのクローンを作成するか、このレポジトリをダウンロードします

開発プロジェクトをセットアップする

次のステップに従って、Android Studio でチュートリアル プロジェクトを作成します。

  1. Android Studio をダウンロードしてインストールします。
  2. Google Play サービス パッケージを Android Studio に追加します。

  3. このチュートリアルの開始時にコードを取得していない場合は、Google Maps Android API v2 Samples レポジトリのクローンを作成するか、このレポジトリをダウンロードします

  4. チュートリアル プロジェクトをインポートします。

    • Android Studio で、[File] > [New] > [Import Project] を選択します。
    • Google Maps Android API v2 Samples レポジトリをダウンロードして保存した場所に移動します。

    • その場所で、StyledMap プロジェクトを見つけます。
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap

    • プロジェクト ディレクトリを選択して [OK] をクリックします。 これで、Android Studio で Gradle ビルドツールを使用してプロジェクトがビルドされます。

API キーを取得して必要な API を有効にする

このチュートリアルを完了するには、Google Maps Android API の使用が承認されている Google API キーが必要です。

下のボタンをクリックしてキーを取得し、API をアクティベートしてください。

キーを取得

詳細については、包括的な API キー取得ガイドを参照してください。

アプリに API キーを追加する

  1. プロジェクトの gradle.properties ファイルを編集します。
  2. 取得した API キーを GOOGLE_MAPS_API_KEY プロパティの値に貼り付けます。 アプリをビルドするときに、Gradle により API キーがアプリの Android マニフェストにコピーされます。

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

アプリをビルドして実行する

  1. Android 端末をコンピュータに接続します。 手順に従って、ご使用の Android 端末で開発者向けオプションを有効にし、端末を検出するようにシステムを設定します。 (または、Android Virtual Device (AVD) Manager を使用して仮想デバイスを設定できます。 エミュレータを選択するときに、Google API を含むイメージを選択するようにしてください。 詳細については、スタートガイドをご覧ください。)
  2. Android Studio で [Run] メニュー オプション(またはプレイボタンのアイコン)をクリックします。 指示に従って端末を選択します。

Android Studio で Gradle が起動して、アプリがビルドされます。次に、アプリが端末またはエミュレータ上で実行されます。 このページの画像のように、マップが暗色(ナイトモード)のスタイル設定で表示されます。

トラブルシューティング:

  • マップが表示されない場合は、前述のとおりに API キーを取得してアプリに追加していることを確認してください。 Android Studio の Android Monitor のログで、API キーに関するエラー メッセージがあるかどうか確認してください。

  • Android Studio デバッグ ツールを使用して、ログを表示してアプリをデバッグしてください。

コードを理解する

チュートリアルのこのパートでは StyledMap アプリの最も重要な部分について説明します。この内容は、同様のアプリの作成方法を理解する上で役に立ちます。

JSON スタイル オブジェクトを含むリソースを追加する

JSON 形式のスタイル宣言を含むリソースを、開発プロジェクトに追加します。 下記の例に示すように、未加工リソースまたは文字列を使用できます。

注: GitHub からダウンロードしたサンプルアプリでは、未加工リソースが使用されています。

未加工リソース

ナイトモード スタイル設定の JSON スタイル宣言を含む未加工リソースを /res/raw/style_json.json で宣言します。

文字列リソース

ナイトモード スタイル設定の JSON スタイル宣言を含む文字列リソースを /res/values/style_strings.xml で宣言します。 このチュートリアルでは、文字列名 style_json が使用されています。 このファイルでは、バックスラッシュを使用して引用符をエスケープする必要があります。

JSON スタイル オブジェクトをマップに渡す

マップのスタイルを設定するには、GoogleMap.setMapStyle() を呼び出して、JSON 形式のスタイル宣言を含む MapStyleOptions オブジェクトを渡す必要があります。

未加工リソース

次のコードサンプルでは、プロジェクトに style_json という名前の未加工リソースが含まれていると想定しています。

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

レイアウト(activity_maps_raw.xml)は、次のようになります。

文字列リソース

次のコードサンプルでは、プロジェクトに style_json という名前の文字列リソースが含まれていると想定しています。

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

レイアウト(activity_maps_string.xml)は、次のようになります。

JSON スタイル宣言の詳細

スタイル設定されたマップでは、色やその他のスタイル変更をマップに適用するために、次の 2 つのコンセプトを使用します。

  • セレクター で、マップ上でスタイル設定が可能な地理的コンポーネントを指定します。 このようなコンポーネントには、道路、公園、水域など、およびそれらのラベルが含まれます。 セレクターには、featureType および elementType プロパティで指定された地物および要素が含まれます。

  • スタイラーは、マップの要素に適用できる色と可視性のプロパティです。 表示色は、色相、色、および明度 / ガンマ値の組み合わせで定義されます。

JSON のスタイル設定オプションの詳細については、スタイル リファレンスを参照してください。

Google Maps APIs Styling Wizard

Google Maps APIs Styling Wizard を使用して、JSON スタイル設定オブジェクトを簡単に生成できます。 Google Maps Android API は、Google Maps JavaScript API と同じスタイル宣言をサポートしています。

次のステップ

スタイル設定を使用してマップ上の地物を非表示にする方法をご覧ください。

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

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