Google Map Lite

Overview of the Google Map Lite Component

The Google Map Lite component allows you to embed the limited functionality of Google Maps into your test app without adding Google Maps web browser API key. In this component, the Appery public key is used to allow to you test the basic map functionality without investing costs and time into configuring the key.

This differentiates this component from the Google Map component which cannot function without setting the Google API Key on the App Settings page of your app.

The Google Map Lite component works in both web applications and native applications. However, for proper functionality, it is highly recommended to set your own key. You can specify it the API key field or in the app App Settings page.

Properties

🚧

Important Note!

This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.

The Google Map Lite component has the following Common properties:

Property NameProperty Description
Map TypeMapType ID is a way to differently display the map in the application. The allowed values are roadmap (default) orsatellite.
API KeyGoogle Map API key.
LanguageUse to define the language to use for UI elements and for the display of labels on map tiles.
RegionAdd the two-character region code (ex. US, UA) to define the appropriate borders and labels to display, based on geo-political sensitivities.
PlaceUse to define map marker location. Default is set to Golden Gate Park, SF, USA.
View pointGoogle Map viewpoint properties:
Latitude defines the center of the map.
Longitude defines the center of the map.

📘

Note

Use the agm-map prefix to increase the priority of your custom classes.

Example: agm-map.map {.....}

Visit the Angular+ Google Map Documentation to read more about Angular+ Google Map.
Visit the Google Map JS API Documentation to read more about Google Map JS API.

📘

Want to know more?

You can also check this document on the Google Map component sample app demonstrating how to use this component in an Ionic app.

You can read more about the Google Map properties here.

📘

You might also like this Appery.io Community video that shows how to create an Ionic application for choosing the best place for a party (using the voting functionality) by using the Google Map component:

You might also like our Appery.io Community video that shows how to use the Google Maps component to get current geolocation with Appery.io Geo Service plugin: