Xamarin.Forms でMapを表示する

Xamarin.FormsでMapを表示するには、"Xamarin.Forms.Maps"コントロールを使用します。
これを使用することで、iOSではApple Map、AndroidではGoogle Mapを容易に使用することができます。

サンプルはこちら

github.com

手順

  • "Xamarin.Forms.Maps"パッケージをプロジェクトに追加する
  • "Xamarin.Froms.Map"を初期化する
  • Map表示用のページを作成する
  • 各プロジェクトごとに必要な設定を行う

Xamarin.Forms.Maps パッケージをプロジェクトに追加

"Xamarin.Forms.Maps"を使用するには、プロジェクトにからパッケージを追加する必要があります。
パッケージは「NuGet」から取得することができます。

f:id:mattsuDev:20150705185117p:plain f:id:mattsuDev:20150705185134p:plain

  • PCLプロジェクトで、設定メニューを表示する。
  • 「追加」→「Add NuGet Packages...」と選択肢、NuGet追加の画面を表示する。
  • 「Official NuGet Gallery」を選択し、検索欄に「xamarin forms maps」と入力して検索する。
  • "Xamarin.Forms.Maps"パッケージをチェックボックスで選択し、「Add Package」で完了させる。

iOSAndroidの各プロジェクトで同様の操作を繰り返します。

完了すると、Mapの利用に必要なパッケージも同時に追加されます。

f:id:mattsuDev:20150705185548p:plain

Xamarin.Forms.Map の初期化

Xamarin.Forms.Mapを使用するには、プラットフォームごとに初期化コードを実装する必要があります。

Androidの初期化コード

Androidは「MainActivity.cs」ファイルに追加します。

Xamarin.Formsでマップを初期化する (Android、MainActivity.cs)

iOSの初期化コード

iOSは「AppDelegate.cs」ファイルに追加します。

Xamarin.Formsでマップを初期化する (iOS、AppDelegate.cs)

Mapページの実装

Mapを表示するためのページを作成します。

Xamarin.Formsでマップを表示するためのページ

iOSの場合は、この段階でマップを表示することができます。 ビルドして確認してみましょう。 Androidの場合は、もう少し作業が必要なので次に進みましょう。

各プロジェクトごとの設定

Android

パーミッションの設定

AndroidでMapを使用するには3つのの権限が必要です。

  • AccessFineLocation
  • AccessNetworkState
  • Internet

f:id:mattsuDev:20150705185812p:plain

  • 「Properties」フォルダの「AndroidManifest.xml」を開きます。
  • 「Required permissions」内の上記項目をチェックすると完了です。

最大ヒープサイズの設定

ヒープの最大サイズを設定していない場合、コンパイルエラーになることがあります。

UNEXPECTED TOP-LEVEL ERROR: java.lang.OutOfMemoryError: Java heap space

f:id:mattsuDev:20150705190101p:plain

  • Androidプロジェクトのオプション画面を表示します。
  • 「ビルド」の「Android Build」を選択し、「Advanced」タブを開きます。
  • 「Additional Options」の「Java heap size:」に「1G」と設定しましょう。

これで、このエラーは解決します。

アプリケーションキーの設定

Androidでは、「Google Maps API v2」を使用します。
これを使用するには、「Google API」のキーを取得し、設定する必要があります。
取得方法については、別にまとめてあるのでそちらを参照してください。

mattsudev.hatenablog.com

取得したキーの設定を行います。

f:id:mattsuDev:20150705191617p:plain gist.github.com

  • 「Properties」フォルダの「AndroidManifest.xml」を開きます。
  • 「ソース」タブを選択します。
  • 「application」タグの間に上記のように「meta-data」タグを挿入します。
  • <取得したAPI Keyをここに書く>の部分にキーを入力して完了です。

iOS

iOSでは、マップを表示するだけなら特に権限は必要ありません。
しかし、現在地の表示などで位置情報を使用する場合は、位置情報使用のための権限を得る必要があります。

位置情報使用のための権限の取得

iOSで位置情報を使用するためには、2つのうちのどちらかの権限が必要です。
アプリに合わせて実装しましょう。

  • NSLocationAlwaysUsageDescription
    常に許可 (バックグラウンド時にも使用できます)
  • NSLocationWhenInUseUsageDescription
    このアプリ使用時のみに許可

「NSLocationAlwaysUsageDescription 」を設定する方法を例にあげます。

f:id:mattsuDev:20150705190602p:plain f:id:mattsuDev:20150705190618p:plain

  • 「Info.plist」を開き、「ソース」タブを選択します。
  • 「Add New entry」を選択し、「+」ボタンを押します。
  • 「Custom Property」と表示された部分を選択すると、矢印ボタンからアイテムリストが表示されます。
  • 「NSLocationAlwaysUsageDescription」を選択します。
  • 「String」に「位置情報の使用を常に許可します」と入力します。

これはアプリ起動時に「位置情報の使用を常に許可する」権限を得るためのメッセージ表示に使用されます。
メッセージには「String」に設定した文言が表示されます。
アプリに合わせて自由に設定してください。

これで、現在地表示など、位置情報を使用した地図も表示することができます。