Google Maps

Google Maps

The Google Maps component allows you to show a map in your app that is powered by Google Maps. You can show routes and markers on the map.

An internet connection is required, and the map will only display on devices – not on the desktop.  If you want a map that works offline without an internet connection, or indoors where GPS is not available, consider using the Offline Map component instead.

Special Notes

Directions and the native Google Maps app

Google does not allow turn-by-turn directions to be provided by third-party apps – for that you will need to link to their website or native apps. You can do that by using the Show Web Page action with a URL of:

If this link is followed on a device, and the native Google Maps app is installed, then the website will redirect the user to the app silently.

Publishing your App: Google Maps API Key

You can use Google Maps in Umajin Preview without any special requirements. However Google requires that each user of their Google Maps API obtain a unique key, so to publish your app, you will need to obtain a key of your own. Visit Google Maps Embedded API Key using your Google account.

Once you have obtained the key, which is a long string of numbers and letters like “AjkiSyAAc29x3fapt-JU0hMw6zN_04JivM8bkuY”, you will then enter it into Umajin Cloud Services when publishing your app.

Properties for Google Maps Component

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.
Latitude The initial latitude that the map will be centered on.
Longitude The initial longitude that the map will be centered on.
Zoom Level The initial zoom level to display
Show marker Whether to show a default marker when the map appears. This can be used to show a simple static location such as a business location.
Reset on page show  Whether the map will be cleared of routes and markers each time the page is shown
Marker Title The title of the default marker
Marker Description The description text that will be added to the default marker
Marker Image The image to use for the default marker. If no image is supplied a default will be used.
Line Color The color of the route line
Line Weight The thickness of the route line in device points.


The following events can occur from the Google Maps component.

On Marker Tapped

Occurs when the user taps on a marker that has been displayed.

Variables available are: [latitude] [longitude] [title]

On Marker Info Window Tapped

Occurs when the user taps on the information window displayed with the marker.

Variables available are: [latitude] [longitude] [title]

On Location Change

Occurs whenever the user’s location changes (from system GPS, wifi etc).

Variables available are: [latitude] [longitude] [zoom]

On Map Press

Occurs when the user taps or clicks on a normal area of the map.

Variables available are: [latitude] [longitude]


The following actions are useful in conjunction with the Google Maps component

Set Map Center Location Positions the map to be centred on the specified latitude and longitude.
Center Map on User Location Positions the map to center on the user’s current location.
Add Map Route by Latitude/Longitude Finds a route between two points. If the start latitude and longitude are left blank, then the user’s current location is used.
Clear Map Route Clears the current route from the map.
Add Map Marker Adds a marker to the map, with a title and description. You also need to supply a name which is used when removing the marker.
Clear Map Marker Removes a marker by name.