MauiアプリでGoogleMapを使う

Maui

はじめに

ただマップを利用するだけであれば Microsoft.Maui.Controls.Maps を使えばいいのだが、今回はどうしてもiPhoneでGoogleMapを使う必要があったので実装した
GoogleMapのAPIキーを利用することになる

環境

項目 内容
OS Windows 10 Home
.NET SDK 8.0.202
Visual Studio 2022 Current 17.9.5

APIキーの取得

GCP(Google Cloud Platform)のAPIを使用する
アカウントを持ってない場合は作成する
下記URLにアクセスしてプロジェクトを作成する
https://console.cloud.google.com/

プロジェクト作成画面
プロジェクト作成

プロジェクト名は適当なものにする
今回は SampleProject とする
組織はなしのまま作成をクリック

下記の画面に移動したはずだ
APIサービス

上部の検索より Google map platform と入れると候補で Google map platform が出てくる
それをクリックするとページ移動する
自分のAPIキーが表示される
このAPIキーはアプリでGoogleMapを利用するとき、認証で使用するので保管しておく
そして GOOGLE MAPS PLATFORM のボタンをクリック
APIキー

再度、上部検索より Google map platform を検索し選択する

Google map platform

Google map platformのページに移動したら左サイドバーにあるAPIとサービスをクリック
APIとサービス

ここでAPIを有効にする
必要なAPIは下記3つとなる

  • Maps JavaScript API
  • Maps SDK for Android
  • Maps SDK for IOS
    これらを有効にする

有効にする

ENABLE と記載されてるリンクをクリックすれば有効になる

画像のように DISABLE なっていれば有効となっている
有効確認

APIは無料枠もあるが、それ以上使用すれば有料になるので気を付けよう
それではMauiアプリを作成していこう

Mauiアプリの作成

VisualStudioで SampleGoogleMap という名前で.NET MAUIアプリを作成する

プラグインのインストール

NuGetから Onion.Maui.GoogleMaps を検索してインストールする
記述時のOnion.Maui.GoogleMapsのバージョンは 5.0.3

記述時では次のプラグインが必要だった
Xamarin.AndroidX.Fragment.Ktx
これはKotlinの拡張機能をC#から利用できるようにするプラグインだ

デバイス位置情報を利用する

AndroidManifest.cs と Info.plist に下記を追加する

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- 追記 正確な位置情報にアクセスすることを許可-->
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!-- 追記 おおよその位置情報にアクセスすることを許可-->
</manifest>

<key>NSLocationWhenInUseUsageDescription</key>
<string>このアプリはあなたの位置情報を使用して地図上で現在地を表示します。</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>このアプリはバックグラウンドでもナビゲーション機能を提供するためにあなたの位置情報を使用します。</string>

MauiProgram.cs コード

builder.UseGoogleMaps内のAPIキーは先ほどGCPで取得したAPIキーを入れる

using Microsoft.Extensions.Logging;
using Maui.GoogleMaps.Hosting;

namespace SampleGoogleMap
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });
#if DEBUG
    		builder.Logging.AddDebug();
#endif

#if ANDROID
            builder.UseGoogleMaps();
#elif IOS
         builder.UseGoogleMaps("**************************"); // ここに先ほど取得したAPIキーを入れる
#endif
            return builder.Build();
        }
    }
}

Androidでも設定をする為、
SampleGoogleMap/Platforms/Android/MainApplication.cs
に追記する

using Android.App;
using Android.Runtime;

namespace SampleGoogleMap
{
    [Application]
    //下記を追記
    [MetaData("com.google.android.maps.v2.API_KEY",
            Value = "********************")] // ここに先ほど取得したAPIキーを入れる
    public class MainApplication : MauiApplication
    {
        public MainApplication(IntPtr handle, JniHandleOwnership ownership)
            : base(handle, ownership)
        {
        }

        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
    }
}

本来パーミッションのリクエストは記載しなくても、自動的にやってくれた気がするが今回許可のダイアログが出てこなかったのでApp.xamlに追記した
マップが生成される前に呼び出す
許可、拒否で処理を書くところだが、今回は呼び出すだけとする

namespace SampleGoogleMap;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new AppShell();
    }

    protected override async void OnStart()
    {
        // パーミッションリクエストのメソッドを呼び出す
        await RequestLocationPermissionAsync();
    }

    public async Task RequestLocationPermissionAsync()
    {
        var status = await Permissions.CheckStatusAsync<Permissions.LocationWhenInUse>();
        if (status != PermissionStatus.Granted)
        {
            status = await Permissions.RequestAsync<Permissions.LocationWhenInUse>();
        }

        // status をチェックして、許可が出ているか確認
        if (status == PermissionStatus.Granted)
        {
            // パーミッションが許可された場合の処理
        }
        else
        {
            // ユーザーがパーミッションを拒否した場合の処理
            // ここで適切なメッセージを表示したり、代替機能を提案するなどの処理を行う
        }
    }
}

ビューのコードとなる

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Maui.GoogleMaps;assembly=Maui.GoogleMaps"
             x:Class="SampleGoogleMap.MainPage">

    <maps:Map x:Name="maps"
                  HorizontalOptions="FillAndExpand"
                  VerticalOptions="FillAndExpand"
                  />

</ContentPage>

MainPage.xaml.csでは余計なものを削除した

namespace SampleGoogleMap;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

これでGoogleMapを利用することができる
マップ

オプションで自分の位置もわかる

<maps:Map x:Name="maps"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            MyLocationEnabled="True" />

他にもあるが下記ページで確認することができる
https://github.com/themronion/Maui.GoogleMaps

さいごに

このようにIOSでもGoogleMapを利用することができる
また初期位置を自分の位置にしたりピンを立てたりすることももちろんできる
今回、ピンをすべて表示しなくてはならなくて、デフォルトのマップではピンがまとまってしまうことからGoogleMapを使用した

簡易的な用語説明

  • GCP : Google Cloud Platform
  • パーミッション : システムの機能を使用したりするために必要な許可のこと

コメント