Xamarin.FormsのMaps SDK for Androidを使って地図を表示する

はじめに


こんにちは、東京アプリケーションシステム 第3ソリューション部のH.Tです。
技術者ブログということで、備忘録も兼ねて最近学んだことを共有します。

昨年の秋ぐらいから、スマホアプリの技術検証という形でXamarinに入門しました。
AndroidとiOSでUIをある程度共通化できるため、使われている方も多いと思います。
私も最初はXamarin.Android?Xamarin.iOS?Formsって何?状態でしたが、
技術検証という名目で作りたいものを作ったり、xamarin案件に関わることができたりして、徐々に頭に定着してきました。
ということで、今回はタイトルの通りXamarin.FormsでGoogleMapのAPIを使ってマップを表示してみます。

開発環境


・Microsoft Visual Studio Community 2019 v16.8.4
・Xamarin.Forms v4.8.0.1451
・Xamarin.Forms.GoogleMaps v3.3.0
・Xamarin.Essentials v1.5.3.2

APIキーを取得する


まずGoogleCloudPlatformでプロジェクトを作成します。

プロジェクト名を適当につけて作成します。

できました。

次にライブラリから「Maps」等で検索して、
「Maps SDK for Android」を選択します。

「有効にする」をクリック。

左上の「Ξ」から「APIとサービス」→「認証情報」を選択します。

「認証情報の作成」を選択します。

APIキーが生成されました。

↑の「キーを制限」からMaps SDK for Android のみに制限をつけましょう。

これでAPIキーが用意できました。

Formsプロジェクトの作成


それでは次にプロジェクトを作っていきます。
「モバイル アプリ(Xamarin.Forms)」を選択して、「次へ」をクリック

プロジェクト名と保存先を設定して「作成」をクリック

プロジェクトのテンプレートを選択します。
今回は一番シンプルな「空白」で作成します。

空っぽのアプリができました。

パッケージのインストール


GoogleMapのパッケージをインストールします。
ソリューションを右クリックし「Nugetパッケージの管理」を選択します。
タブを「参照」に切り替えて、「googlemaps」で検索すると、「Xamarin.Forms.GoogleMaps」が出てくるのでインストールします。

Android.Manifestの設定


プラットフォーム固有の設定をします。
今回はAndroidのみなので、Android.Manifestのみ編集します。

内に先ほど取得したAPIキーを<application>設定します。
<meta-data android:name=”com.google.android.geo.API_KEY” android:value=”ここにさっきのAPIキーをコピペ” />
また、API28以上を対象とする場合は↓も必要です。
<uses-library android:name=”org.apache.http.legacy” android:required=”false” />

位置情報を渡す必要があるので、<manifest>内にパーミッションを追加します。
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.INTERNET” />
以下のようになればManifestの設定は完了です。

 

画面設定


画面側を設定していきます。
MainPage.xamlの<ContentPage>に↓を追加します。
xmlns:map=”clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps”

いらないテンプレートを消して↓を追加します。
<map:Map x:Name=”MyMap” HasZoomEnabled=”True” MapType=”Street” />

以下のようになればOKです。

MainActivity


プラットフォームの固有の設定も必要なため、MainActivityのOnCreateに↓を追加します。
Xamarin.FormsGoogleMaps.Init(this, savedInstanceState);
以下のようになればOK

 

コードビハインド


コードビハインドを変更していきます。
TASC本社のあるメディアシップの緯度経度を設定し、幅10km分表示するように設定します。

実行してみる


それでは実行してみます!

設定通り、メディアシップを中心としてマップが表示されました。
ただ少し遠い気がするのでもう少し近づいてみましょう。
Distance.FromKilometers(10)Distance.FromKilometers(1)に変更して再度実行します。

表示幅が1kmに変更されました。

マップにピンを立てる


マップが表示できたので、次にメディアシップの場所にマップピンを立ててみます。
コードビハインドを以下のように変更します。

実行してみましょう。

メディアシップにピンが立ちました。
ピンをタップするとLabelとAddress情報が表示されます。

他にもピンを傾けて表示したり、ドラッグで移動するように設定することもできます。
詳しくはMicrosoftDocsを参考にしてみてください。

GPSから位置情報を設定


最後に端末のGPSから位置情報を取得し、マップ上に表示します。

コードビハインドに緯度経度を取得するメソッドを追加します。
以下のように変更します。

GPSを利用するため、今度は実機デバッグで実行してみましょう。

このように現在位置が表示されます。
私が今上所の支社にいることがまる分かりですね。

他にも逆ジオコーディングを使うと緯度経度を住所に変換することもできます。

まとめ


Xamarin.FormsでMaps SDK for Androidを使ってマップを表示しました。

私と同じくXamarinのマップ機能の実装で困っている方の助けになれば幸いです。

東京アプリケーションシステム

外観

最近の記事