Build together, debug together. Join the community on Discord.→

Adding Google Maps to your Uno Platform-WASM App

10 May 2022

Google Maps is the leading location data and visualization platform for the web, but the functionality of Google Maps extends well beyond its mobile app — if you are building a mobile, web, or desktop app and want to include location displays in any way, Google Maps offers  developer APIs that give access to Google’s geographical data.

Google Maps API allows you to display and leverage interactive maps to help users create itineraries, routes, and more. Its data also refreshes in real-time, meaning that maps you create with Google API will always be up to date for visitors.

Recently, a new Uno Platform user was looking to implement Google Maps into his Uno Platform WASM application but was running into some blockers since MapControl does not provide WASM support yet. Luckily, you can integrate Uno-WASM Web Applications with existing JavaScript components and it’s quite simple.

In this article, Martin Zickmund works through a step-by-step guide on how you can easily implement Google Maps into your WASM application.

Get the Google Maps API key

You can follow any tutorial available on the web like here on how to get an API key via the Google Developer Console. It involves creating a project, adding required billing information, creating an API key, and then enabling Google Maps API for it. Make sure to restrict the API key when you plan to go public so that someone does not misuse your key for their purposes and use up your billing this way.

Add a Custom index.html to your WASM Project

Because Google Maps requires loading an external JavaScript library, it is useful to load it ahead of time when your app first loads. to do that, add an index.html file to the root of your WASM project with the following content:

				
					<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

    <script type="text/javascript" src="./require.js"></script> 
    <script type="text/javascript" src="./mono-config.js"></script> 
    <script type="text/javascript" src="./uno-config.js"></script> 
    <script type="text/javascript" src="./uno-bootstrap.js"></script> 
    <script async type="text/javascript" src="./dotnet.js"></script> 
    <!-- Google Maps libs here: --> 
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=&v=weekly"></script> 

    $(ADDITIONAL_CSS) 
    $(ADDITIONAL_HEAD) 
</head> 
<body> 
    <div id="uno-body" class="container-fluid uno-body"> 
        <div class="uno-loader" 
             loading-position="bottom" 
             loading-alert="none"> 

            <!-- Logo: change src to customize the logo --> 
            <img decoding="async" class="logo" 
                 src="" 
                 title="Uno is loading your application" /> 

            <progress></progress> 
            <span class="alert"></span> 
        </div> 
    </div> 
    <noscript> 
        <p>This application requires Javascript and WebAssembly to be enabled.</p> 
    </noscript> 
</body> 
</html>

Note: that most of the code is boilerplate which is the default in Uno WASM projects (see here). Replace MYAPIKEY with your API key from the developer console.

Now you need to instruct the WASM bootstrapper to use this custom index.html. Double-click the .csproj in the Solution Explorer and add the following:

				
					<PropertyGroup> 
   <WasmShellIndexHtmlPath>index.html</WasmShellIndexHtmlPath> 
</PropertyGroup>

Create Custom Maps Element

Now that the Google Maps API is available on the JavaScript side, we can create a managed component that will represent the mapping control in our Uno Platform application:

				
					#if __WASM__ 
using System; 
using Uno.UI.Runtime.WebAssembly; 
using Windows.UI; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Media; 

namespace UnoWasmGoogleMaps 
{ 
    [HtmlElement("div")] 
    public class GoogleMapView : FrameworkElement 
    { 
        private readonly string _mapObjectName = "map_" + Guid.NewGuid().ToString().Replace("-", ""); 

        public GoogleMapView() 
        {             
            Background = new SolidColorBrush(Colors.Transparent); 
            LoadMap();
        } 

        private void LoadMap() 
        { 
            var javascript = $@"var {_mapObjectName} = new google.maps.Map(element, {{ center: {{lat: -34.397, lng: 150.644}}, zoom: 8 }});"; 

            this.ExecuteJavascript(javascript);
        } 
    } 
} 
#endif

Note: We are using a custom unique variable name to store the map object created by Google Maps API. You can use this variable name to manipulate the map and call some functions on it.

Use the Element

Finally, you can use the element in your app like this:

				
					<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <local:GoogleMapView />
</Grid>

Result

Next Steps

If you are new to Uno Platform, the best way to get started is to follow our official getting started guide. (5 min to complete) For better discoverability and ease of adopting Uno Platform, we have brushed up and published various working examples for Uno Platform, ranging from small single-feature samples to larger showcase applications.