ディーバ Blog

大阪発 C#の会社、株式会社ディーバの Blog です。

トップ > Windows 10 Mobile

UWP アプリで Google Maps の表示

C# Google Maps UWP Windows 10 Mobile

UWP (Universal Windows Platform) で Google Maps を表示するには、WebView と Google Maps JavaScript API を使うしかないようです。

WebView の配置

XAML に WebView を配置します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView x:Name="webView"></WebView>
</Grid>

地図を表示する HTML ファイル の作成

HTML ファイルとして Google Maps を表示するコードを記述します。

プロジェクトに HTML ファイルを追加し（ここでは map.html）、ファイルのビルドアクションは「コンテンツ」を選び、「出力ディレクトリにコピー」は、コピーする項目を選びます。

また、Google Developer Console から、Google Maps JavaScript API を有効にし、ブラウザーキーを取得します。

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <title>Map</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 34.686564, lng: 135.503155 },
                zoom: 8
            });
        }

        function setCenter(lat, lng) {
            var latLng = new google.maps.LatLng(lat, lng);
            map.setCenter(latLng);
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=**API_KEY**&callback=initMap">
    </script>
</body>
</html>

HTML ファイルを読み込み WebView に表示

プロジェクトに追加した HTML ファイルを読み込み、WebView に表示します。

string html;

var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///map.html"));
using (var st = (await file.OpenReadAsync()).AsStream())
using (var r = new StreamReader(st))
{
    html = await r.ReadToEndAsync();
}
            
// 文字列から WevView に表示する内容を設定
webView.NavigateToString(html);

実行結果

f:id:jz5_diva:20160419234223p:plain

Windows 10 Mobile MADOSMAでは、かなりストレスのある操作性でした。

地図が表示されず、map.html を直接 Web ブラウザーで開いて「このページでは Google マップの要素を表示できませんでした。」と表示される場合は、Google Developer Console で JavaScript API を有効にしているか確認しましょう。

JavaScript と C# のコード間でのやりとり

C# → JavaScript

JavaScript の関数を WebView 経由で呼び出して地図の操作ができます。

await webView.InvokeScriptAsync("setCenter", new string[] { "34.686564", "135.503155" });

JavaScript → C#

C# で JavaScript からの呼び出しを受けるには、WebView.ScriptNotify を使います。

webView.ScriptNotify += (sender, args) =>
{
    System.Diagnostics.Debug.WriteLine(args.Value);
};

JavaScript 側は、window.external.notify で値を送ります。

window.external.notify("value");

共通のコードで iOS/Android/UWP のダイアログを表示できる ACR User Dialogs for Xamarin and Windows

Android iOS UWP MvvmCross Xamarin Windows 10 Mobile

ACR User Dialogs for Xamarin and Windows

ACR User Dialogs for Xamarin and Windows を使うと、MvvmCross や MVVM パターンの ViewModel のコード（PCL プロジェクト側）から、ダイアログを表示するコードを簡単に書けます。MvvmCross 用のプラグインもあり MvvmCross のサイトからも紹介されいています。

ダイアログ (Alert) だけでなく、ローディング画面なども呼び出せます。機能は次の通り。

  • Action Sheet (multiple choice menu)
  • Alert
  • Confirm
  • Loading
  • Login
  • Progress
  • Prompt
  • Toasts

NuGet からプロジェクトにインストールします。ViewModel 側（PCL プロジェクト）と、View 側の各プラットフォームのプロジェクトそれぞれにインストールします。

公式のサンプルコードは GitHub の examples にあります。

Dialog

using using Acr.UserDialogs;

UserDialogs.Instance.Alert("たこ焼きです", "確認", "OK");

f:id:jz5_diva:20160421102435p:plain

Action Sheet

using using Acr.UserDialogs;

var config = new ActionSheetConfig();
config.Title = "メニュー";
config.Add("たこ焼き", () => {/* Do something */ });
config.Add("お好み焼き", () => {/* Do something */ });
UserDialogs.Instance.ActionSheet(config);

f:id:jz5_diva:20160421103041p:plain

Confirm

using using Acr.UserDialogs;

var config = new ConfirmConfig();
config.Title = "確認";
config.Message = "たこ焼きを購入します";
config.OnConfirm = (result) =>
{
    /* Do something */
};
config.OkText = "購入";
config.CancelText = "キャンセル";
UserDialogs.Instance.Confirm(config);

f:id:jz5_diva:20160421102456p:plain

おわりに

上記以外にももう少し細かなオプションや、非同期呼び出しなども用意されています。使用感として、View 側に一切コードが不要のため手軽で便利ですが、Android ではスタイルを適用できないなど、少しこだわったアプリでは使いづらいところもあります。