Google Maps

GoogleMap widget can be used for many purposes such as finding nearby places (restaurants, gas stations, etc), finding directions to a destination etc.
The implementation of google maps includes the following steps:
1.​Creating the Collections for map configuration​
1.​Create the Collection​
2.​Adding map data into the collection​
3.​Customizing Map​
2.​Adding markers​
1.​Creating markers collection​
2.​Adding marker data into the collection​
3.​Customizing Markers​
3.​Adding GoogleMap to your project​
Prerequisites
Before you start adding the Google Map widget, you'll need to add the API keys.
1. Creating the Collections for map configuration
To enable users to use the map, the collection for map configuration and markers must be created
1.1 Create the Collection
Go to Database section from the Dashboard menu or the Navigation menu within the App Builder(left side of the screen).
Click + New collection and create your collection (e.g. mapConfig).
1.2 Adding map data into the collection
After, click on the + New Document.
Insert document name.
Click the + Add field button.
In the key box, enter the name of the field and enter the value.
Click Confirm Button.
1.3 Customizing Map
Add mapStyle
Changing the Map style allows you to change the overall theme of the map. 
To change the map style, click here.
Setting initial location
When users open the map, it should show some location at first. Setting the initial location allows your users to see the map with a specific location or user's current location when it opens up.
To open a map with a specific location:
Move to the Documents created earlier in CMS and enter the initialPositionLat and initialPositionLng properties. 
Enter the values in the respective properties.
To get the lat long values for any location, open to Google Map, right-click on any place and click on the first item from the list.
Setting the initial zoom
To change the initial zoom level of the map:
Move to the Documents created earlier in CMS and enter the initialZoomLvl of Map property and enter the value.
Insert the data within the cms fetch
​
2. Adding markers 
A marker is an icon that appears over the map indicating a location. This section describes how to work with markers in your Teta project.
Adding markers to the map comprises the following steps:
1.​Creating markers collection​
2.​Adding markers data into the collection​
3.​Customizing Markers​
2.1 Creating markers collection
Go to Database section from the Dashboard menu or the Navigation menu within the App Builder(left side of the screen).
Click + New collection and create your collection (e.g. mapMarkers).
2.2 Adding markers data into the collection
Click on the + New Document.
Insert document name.
Click the + Add field button.
In the key box, enter the name of the field and enter the value.
Click Confirm Button.
2.3 Customizing Markers
The Properties Panel can be used to customize the behavior of your Marker.
Setting the latitude and longitude
To set the Latitude/Longitude of the Marker:
Move to the Documents created earlier in CMS and enter the Lat and Lng properties. 
Enter the values in the respective properties.
Insert the icon
Move to the Documents created earlier in CMS and enter the icon property. 
Enter the link of the image you want to use as a marker in the respective property.
Setting the iconWidth / iconHeight
To set the iconWidth / iconHeight of the Marker:
Move to the Documents created earlier in CMS and enter the iconWidth and iconHeight properties. 
Enter the values in the respective properties.
Setting the drawDistance
To set the path from the user location to the marker:
Move to the Documents created earlier in CMS and enter the drawDistance property. 
Enter the values in the respective properties.
3. Adding GoogleMap to your project
3.1 Create googleMaps Controller
To add the Google maps Controller widget in your project:
Go to the Scaffold.
Add a State and as type enter Google maps controller.
Go to Google Maps.
Move to Properties Panel and find the googleMaps Controller dropdown and change it to State.
​
3.2 Insert Cms Fetch to collect map data
Inside the Tree Area, insert a Cms Fetch from the Widget Panel and change the name (e.g mapConfig).
Find Collection and specify the name of the collection from which to take the map data.
3.3 Insert Cms Fetch to collect marker data
Insert a Cms Fetch from the Widget Panel and change the name (e.g mapMarkers).
Find Collection and specify the name of the collection from which to take the markers data.
3.4 Add Google Maps
Select Google Maps of the Tree Area.
Find Map Config Datataset and select the widget from which to take the map data, MapConfig.
Find the dropdown below related to the map and select the value you are interested in.
Find Marker Datataset and select the widget from which to take the map data, mapMarkers.
Find the dropdown below related to the markers and select the value you are interested in.
Last modified 6mo ago