Google Map Lite

Overview of the Google Map Lite Component

The Google Map Lite component allows you to embed limited Google Maps functionality into your test app without requiring a Google Maps web browser API key. This component uses the Appery public key, enabling you to test basic map functionality without the cost and time investment of configuring your own key.

This differentiates the Google Map Lite component from the Google Map component, which cannot function without setting the Google API Key on your app's App Settings page.

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

Properties

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

The Google Map Lite component has the following Common properties:

Property Name	Property Description
Map Type	MapType ID determines how the map is displayed in the application. The allowed values are roadmap (default) or satellite.
API Key	Google Maps API key.
Language	Used to define the language for UI elements and for displaying labels on map tiles.
Region	Add a two-character region code (e.g., US, UA) to define the appropriate borders and labels to display, based on geo-political sensitivities.
Place	Used to define the map marker location. Default is set to Golden Gate Park, SF, USA.
View point	Google Maps 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 Maps Documentation to read more about Angular+ Google Maps.
Visit the Google Maps JS API Documentation to read more about the Google Maps JS API.

📘
Want to know more?
You can also check this document on the Google Maps component sample app demonstrating how to use this component in an Ionic app.

You can read more about the Google Maps 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 voting functionality) by using the Google Maps component:

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

Updated 2 days ago