ディーバ Blog

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

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");