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 Offline Map 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 for the 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 Google Maps component thats size will be maintained across devices.|
|Initial Map View|
|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|
|Desktop User Location|
|Set User Location||For 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.|
|Show default marker||Whether 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.|
|Title||The title of the default marker|
|Description||The description text that will be added to the default 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 be used to instigate Actions from the Google Maps component.
|On Marker Tapped||Event occurs when the map marker is tapped.|
|On Marker Info Window Tapped||Event occurs when the information window describing the location of the marker is tapped.|
|On Map Moved||Event occurs when the map is moved.|
|On Map Pressed||Event occurs when the map is pressed.|
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 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.