We’re always keeping an ear out for feature requests, bugs, and issues raised by the …
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.
In this article, Martin Zickmund works through a step-by-step guide on how you can easily implement Google Maps into your WASM application.
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.
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:
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.
Finally, you can use the element in your app like this:
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.