Google Maps In App Inventor

Published on February 15, 2022

The App Inventor system has a built-in Maps component, displaying OpenStreetMap maps, but some users prefer using Google Maps. In this guide, we will embed a Google Map in our App Inventor project, and the user can choose their own latitude and longitude to display.

To discuss and find more information, please read this MIT App Inventor topic. Thank you!

This is a version of Google Maps that is comparatively limited, but does not require API keys. If you want a version that includes API keys, click here. Thank you!

🏷️ Tags: #api, #tutorials-and-guides, #google, #maps

A. Embed a Google Map

  1. Create a project, give it a suitable name.

  2. Add a WebViewer to the Designer. A WebViewer displays web pages.

  3. Set the HomeUrl property of the WebViewer to https://maps.google.com. This is because we want to display Google Maps in front of the user.

This is the simplest way to add a Google Map into your app.

B. Panning to a certain location in Google Maps

The default Map component has a PanTo block that sets the center of the map to a specific latitude and longitude, and a zoom level. For more information about a zoom level, click here. With Google Maps, it is also available.

We specify the latitude, longitude and the zoom level as variable blocks. When the screen initializes, we pan the map to the given latitude and longitude. This is because the format of the Google Map URL is:

https://www.google.com/maps/@latitude,longitude,zoomLevelz

C. Satellite and terrain maps

Each type of Google Map has its own data type. This means, Google uses a piece of string in the URL to specify the map type. We use a dictionary to put all of the map types in here.

Below is a dictionary table for normal, satellite, terrain, traffic, transit, and satellite-traffic maps.

The values are the codes used to specify the map types. We put all of them in a dictionary so that we do not need to remember them.

If I want to show a satellite map, I can use this.

We specify the latitude, longitude and the zoom level as variable blocks. When the screen initializes, we pan the map to the given latitude and longitude. This is because the format of the Google Map URL is:

https://www.google.com/maps/@latitude,longitude,zoomLevelz/data=mapTypeCode

D. Search for a location

NOTE: If you choose to use this method, you will not be able to set your map type and zoom level.

We specify the keyword searched in the global locationKeyword parameter. We replace spaces with the addition sign because usually we do not want spaces in URLs. We also replace commas with %2C.

E. Groceries, hospitals and restaurants near me

The following destinations are supported in this feature: Groceries, Restaurants, Takeout, Gas, Hotels, Coffee, Hospitals, Schools, Pharmacies, ATMs.

NOTE: If you choose to use this method, you will not be able to set your map type and zoom level.

F. More customization properties!

The guide is not enough? Feel free to browse the Google Maps documentation for more detail.

G. Downloads

Tests

Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite and the Google Android emulator (Android 2.2).