[INTRO] 🗺️ Google Maps With App Inventor!

:computer: Introduction

:computer: DIFFICULTY: :star::star::star::star::star: (5/10)

Recently there has been multiple users asking for Google Maps in App Inventor. In this tutorial, we will be embedding a Google Map in your App Inventor project.

There is, one solution, however, which uses the ActivityStarter. However, some devices might require the user to swipe up. In this tutorial, we will use a WebViewer to embed the content.

:warning: WARNING: To use the app, you will need active internet connection.

:date: Published date: 2022-02-15T06:24:00Z

Your app will be able to:

  • pan the map to a specific latitude, longitude and zoom level.

  • customize your map to be a normal, terrain, satellite, traffic, transit or satellite-traffic map.

  • search for a location and pan your map to that location.

  • search for groceries, restaurants, takeouts, gas stations, hotels, coffee shops, hospitals, schools, pharmacies and ATMs.

Do you want the good news? Unlike the built-in component in Kodular, you do not need the extra procedures for an API key :key:. Great!

:computer: 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.

:computer: 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.

image

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:

image

:computer: 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:

image

:computer: Search for a location

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.

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

:canned_food: :hospital: Groceries, hospitals and restaurants near me

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

:paintbrush: More customization properties!

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

:inbox_tray: Downloads

MapsDemo.aia (2.9 KB) , a demo AIA file that covers filtering with latitude, longitude, zoom level and map type.

:heavy_check_mark: Tests

Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite.

:+1: Rate my tutorial! :-1:

  • Good tutorial!
  • Bad tutorial.

0 voters

Kindly :email: PM me or reply here if you have any questions! Also, if you like my tutorial, please :heart: like it! It takes some effort for me to make it...

Votes and likes tell me the general user feedback of my tutorial. If you read this tutorial, please take 20 seconds to drop by and give a vote / like!

If you have any features that you want to add to this tutorial, PM me.

This tutorial is available on my website here.

:lollipop: Similar tutorials

No similar tutorials.


Gordon Lu

:speech_balloon: Message :earth_africa: Website :e-mail: E-mail

14 Likes

Nice tutorial Gordon.

App Inventor 2 developers can also use the WebViewer along with the Google Static map api to display and program a Google Map. Kodular's component is not needed and everything that can be done with Kodular can be done using the api and calling a Web string url you can construct.

Using the api does require a Google API key . The key includes a significant free usage.

App Inventor 2 developers can also use an intent to display a Google Map without providing an api key. This technique uses an intent. It is more limited but is very simple to code.
The ActivityStarter can let you use an intent. Something like this will post a pin at any specific latitude and longitude. Substitute the LocationSensor code to post your present location

Of course, App Inventor's Map component (which uses OpenStreetMap tiles ) can do even more things with a map and Markers.

Keep up the good work.

3 Likes

(added to FAQ)

3 Likes

How to add polygon and calculation of the land?