Video

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

An internet connection is required. If you want a map that works offline without an internet connection, or indoors
where GPS is not available, consider using the OfflineMap component instead.

Note: On the desktop in preview mode, the Google Map component displays a modified version of Google Maps website. This is provided to help you test your projects, but may not be exactly identical to the experience on mobile devices

Properties

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 Google Maps component thats size will be maintained across devices.

Initial Map View
LatitudeThe initial latitude that the map will be centered on.
LongitudeThe initial longitude that the map will be centered on.
Zoom LevelThe initial zoom level to display
Desktop User Location
Set User LocationFor desktop testing purposes, this allows you to set a simulated user location. You can also use the File – Pick User Location menu. This does not affect the project on mobile devices where real GPS location will be used.
Default marker
Show default markerWhether to show a default marker at the initial location when the map appears. This can be used to show a simple static location such as a business location. Note this marker will have a name of “default” and can be removed with that name.
TitleThe title of the default marker
DescriptionThe description text that will be added to the default marker
ImageThe image to use for the default marker. If no image is supplied a default will be used.
Routes
Line ColorThe color of the route line
Line WeightThe thickness of the route line in device points.

Events

The following events can be used to instigate Actions from the Google Maps component.

 

On Marker TappedEvent occurs when the map marker is tapped.
On Marker Info Window TappedEvent occurs when the information window describing the location of the marker is tapped.
On Map MovedEvent occurs when the map is moved.
On Map PressedEvent occurs when the map is pressed.

Actions

There are various mapping actions that relate to the mapping components.


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:

https://www.google.co.nz/maps/dir//latitude,longitude/

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 Project: Google Maps API Keys

You can use Google Maps in Umajin Editor Lite without any special requirements.

However when it comes time to publish your app to App Stores, Google requires that each app obtains unique keys for their Maps APIs.

On your Google Developer account, you will need to enable APIs for the following services:

  • Android Maps SDK
  • iOS Maps SDK
  • Directions API (if you use route finding)

In addition you will need to create API keys for each of these services. You can use one unrestricted key for all of them, however for better security Google recommends creating a separate key for each one.

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