XamarinでGoogleMapを使ってみる｜遊んだ分だけエンジニア

2018/08/21　Manifestファイルが抜けていたので追記しました。

Xamarin記事を久々に書いてみようと思います。

今回は『GoogleMap』を表示するまでご紹介します。

なお今回は下記のバージョンを使用し、プロジェクト作成は省略します。

（Android8.0を使おうとしたらエラー対処しきれず断念しました…。）

はじめに

Xamarinには標準の『Xamarin.Forms.Maps』が存在しますが、いかんせん使い勝手が悪く見かねた『amay077』さんがXamarin用の『GoogleMap（Xamarin.Forms.GoogleMaps）』を開発してくださいました。

仕事でも使わせて頂きましたが、『amay077』さんには感謝カンゲキ雨嵐です。

何せXamarinの調べ物をすると英語ばかりなのに、日本語版のREADEMEまで用意してくださってます。

『Xamarin.Forms.Maps』と『Xamarin.Forms.GoogleMaps』の違いに関しては『amay077』さんがまとめられているのでここでは割愛します。

Xamarin.Forms.GoogleMaps

上記のページを見て頂くとわかるかと思いますが、初めて使う方にとっては少々ハードルが高めです。

既に『GoogleAPI』を使用しての開発経験等があればすぐわかるのかもしれませんが、私はそういった経験がなかったため、少々苦労しました。

MSサイトも日本語訳してくれるのはありがたいのですが、日本語訳してしまうことによって文脈を読み取れなくなるのがたまにキズですね。

Xamarinに関して調査を行う場合は、一旦日本語訳してからキーワードが見つかった場合には英語に戻して読むのが一番早いかと思われます。

それでは最初に『Xamarin.Forms.GoogleMaps』を導入してみましょう。

「ソリューション」右クリック⇒「ソリューションのNugetパッケージの管理」から、検索フォームに「GoogleMaps」を入力することで『Xamarin.Forms.GoogleMaps』をヒットさせられます。

今回はAndroid7.1を対象とする為、2.3.0をインストールしました。

SHA-1フィンガープリントの取得

フィンガープリントは『GoogleAPIキー』の制限（使用元の限定）の為に使用されます。

フィンガープリントの取得を行うにはまずコマンドプロンプトを開き、下記のディレクトリに移動します。

C:\Program Files (x86)\Java\jdk1.8.0_161\bin

移動するコマンドは簡単ですが以下になります。

cd C:\Program Files (x86)\Java\jdk1.8.0_161\bin

1	cd C:\Program Files (x86)\Java\jdk1.8.0_161\bin

上記の場所で下記のコマンドを実行します。

keytool.exe -list -v -keystore "C:\Users\[ユーザー名]\AppData\Local\Xamarin\Mono for Android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

1	keytool.exe -list -v -keystore "C:\Users\[ユーザー名]\AppData\Local\Xamarin\Mono for Android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

[ユーザー名]の欄にはお使いのユーザー名を入力してください。

上記のコマンドを実行するとコマンドプロンプトに下記の出力がされると思います。

画像では隠してますが、ここのSHA1右に出力されているフィンガープリントを控えておいてください。

GoogleAPIプロジェクトの作成（APIキーの取得）

Google API Consoleに移動し、「プロジェクトを作成」をクリックします。

表示されたダイアログの「作成」をクリックします。

プロジェクト名を入力し、「作成」をクリックします。

ここではプロジェクト名を「GoogleMaps」にしました。

プロジェクトが作成されたら「APIとサービスの有効化」をクリックします。

様々なAPIが表示されますので、下記の「Maps SDK for Android」をクリックします。

初期表示で表示されない場合は検索フォームをご利用ください。

「Maps SDK for Android」の詳細ページが表示されるので「有効にする」をクリックします。

APIを有効化したらタブの「認証情報」をクリックします。

表示されたダイアログの「認証情報を作成」をクリックすると選択肢がさらに表示されるので「APIキー」をクリックします。

「APIキー」の作成はこれで完了ですが、流出した際の不正利用（他人からの使用）を避けるため、「キーを制限」をクリックします。

「APIキー」の名前を入力します。

ここでは「GoogleMaps for Xamarin」としました。

今回はXamarinのAndroidプロジェクトで使用するため、「Androidアプリ」を選択します。

作成したXamarinプロジェクトのパッケージ名と、最初に取得したフィンガープリントを入力し、「保存」をクリックします。

作成したプロジェクトのパッケージ名は、「Androidプロジェクト」右クリック⇒「プロパティ」から下記の場所に記載されています。

これで「APIキー」の発行は完了です。

『Xamarin.Forms.GoogleMaps』を使ってGoogleMapを表示してみる

表示だけなのでさらっと行きます。

下記のコードを使用します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"
             x:Class="SampleAndroid7._1.Views.MainPage"
             Title="{Binding Title}">

    <maps:Map/>

</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"

x:Class="SampleAndroid7._1.Views.MainPage"

Title="{Binding Title}">

<maps:Map/>

</ContentPage>

using Android.App;
using Android.Content.PM;
using Android.OS;
using Prism;
using Prism.Ioc;
using Xamarin.Forms.GoogleMaps;

namespace SampleAndroid7._1.Droid
{
    [Activity(Label = "SampleAndroid7._1", Icon = "@mipmap/ic_launcher", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);

            // 追加したコード
            Xamarin.FormsGoogleMaps.Init(this, bundle);

            LoadApplication(new App(new AndroidInitializer()));
        }
    }

    public class AndroidInitializer : IPlatformInitializer
    {
        public void RegisterTypes(IContainerRegistry container)
        {
            // Register any platform specific implementations
        }
    }
}

using Android.App;

using Android.Content.PM;

using Android.OS;

using Prism;

using Prism.Ioc;

using Xamarin.Forms.GoogleMaps;

namespace SampleAndroid7._1.Droid

{

[Activity(Label = "SampleAndroid7._1", Icon = "@mipmap/ic_launcher", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity

{

protected override void OnCreate(Bundle bundle)

{

TabLayoutResource = Resource.Layout.Tabbar;

ToolbarResource = Resource.Layout.Toolbar;

base.OnCreate(bundle);

global::Xamarin.Forms.Forms.Init(this, bundle);

// 追加したコード

Xamarin.FormsGoogleMaps.Init(this, bundle);

LoadApplication(new App(new AndroidInitializer()));

}

public class AndroidInitializer : IPlatformInitializer

{

public void RegisterTypes(IContainerRegistry container)

{

// Register any platform specific implementations

}

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.appname" android:installLocation="auto">
  
	<uses-sdk android:minSdkVersion="19" />
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  
  <!-- OpenGL ESの設定 -->
  <uses-feature
    android:glEsVersion="0x00020000"
    android:required="true"/>
  
	<application android:label="SampleAndroid7._1.Android" android:icon="@mipmap/ic_launcher">

    <!-- APIの設定 -->
    <meta-data
      android:name="com.google.android.gms.version"
      android:value="@integer/google_play_services_version" />
    <meta-data
      android:name="com.google.android.maps.v2.API_KEY"
      android:value="[APIキー]" />

  </application>
    
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<uses-sdk android:minSdkVersion="19" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-feature

android:glEsVersion="0x00020000"

android:required="true"/>

<meta-data

android:name="com.google.android.gms.version"

android:value="@integer/google_play_services_version" />

<meta-data

android:name="com.google.android.maps.v2.API_KEY"

android:value="[APIキー]" />

</application>

</manifest>

上記のコードを使用して実行すると、デバッグ機にGoogleMapが表示されます。

「全ての道はローマに通ず」でしょうか。

デバイス名がちょっと恥ずかしいですが、気にせんでください。

Xamarinプロジェクト（Android）でのGoogleMapを使うことが出来ました。

まとめ

XamarinでGoogleMapを使うには

フィンガープリントの入手
GoogleAPIプロジェクトの作成
Xamarin.Forms.GoogleMapsの導入

まとめると簡単な気もしますが、少なくとも私は苦労しました！😭

次回はGoogleMapをMVVMで使ってみたいと思います。

~~いつになるかわかりませんが。~~

以上です。

XamarinでGoogleMapを使ってみる

はじめに

SHA-1フィンガープリントの取得

GoogleAPIプロジェクトの作成（APIキーの取得）

『Xamarin.Forms.GoogleMaps』を使ってGoogleMapを表示してみる

まとめ

“XamarinでGoogleMapを使ってみる” への1件のフィードバック

コメントを残すコメントをキャンセル

はじめに

SHA-1フィンガープリントの取得

GoogleAPIプロジェクトの作成（APIキーの取得）

『Xamarin.Forms.GoogleMaps』を使ってGoogleMapを表示してみる

まとめ

関連記事

“XamarinでGoogleMapを使ってみる” への1件のフィードバック

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル