Embedded Files
π Please help us complete a 5 minute survey!
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
Create a project, give it a suitable name.
Add a WebViewer to the Designer. A WebViewer displays web pages.
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
G. Downloads
Tests
Tests
Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite and the Google Android emulator (Android 2.2).
Β© Gordon Lu π§ E-mail π¬ Message π Phone call
Google Sites
Report abuse