Thanks to the GoogleMap API, you can create more advanced Maps within your projects. The Google Map API widget lets you create a series of Markers with associated data. A series can be created manually by adding the Markers one by one, or directly by loading geolocated records from a database.
In Order to use the GoogleMap API Plugin, you must enable it from the project settings (Plugins Tab) and set your Google Map API key by clicking on the “Configure” button.
Using GoogleMap API is not possible with the Thorium Builder Lite Edition, and it requires to get an API key from Google at this address:
The size of the container that will display the map is responsive with a fixed display ratio between height and width.
The ratio can be from 1:1 (Square) to 21:9 (Wide).
The View mode for the map:
The Initial Zoom Level from 0 to 18.
Thorium Builder implements some predefined Themes.
Themes won't be applied when the map is displayed in Satellite or Hybrid Mode.
ULTRA LIGHT GRAY
ULTRA LIGHT BLUE
If this option is selected , the map will be automatically centered to the User current location.
You can define the Latitude and Longitude of the point where you want to center the map when the page is loaded.
Note that if the previous option (GeoLocate user) is enabled, the map will try first to center to the user position.
You can choose a Point (Lat & Lng) from a Map by selected the Button “Choose on Map” as shown in the screen below:
The “Markers” tab of the GoogleMap Configuration Window lets you add markers from the Database or manually.
A Web project can be populated from static markers or SQLite DB Markers, a Mobile project can also be populated from a Firebase Database or with an external Remote database thanks to the Json API Plugin.
If you select the Checkbox “Get Markers from Database”, then the markers will be loaded from the geolocated records from the database.
If that option is not selected, then you will have to add the geolocated markers one by one by using the + button.
When using Markers from the database, you will have to set the following options:
1°- Category: the database records category you want to load.
2°- The maximum number of rows you want to load.
3°- The detail window that will be loaded when the user will select a marker. (Can be empty.)
It is possible to populate a Map from a Firebase Collection, you just have to set the Collection name, the Firebase Fields and, if required, the filter values:
The Markers coordinates can be populated from individual lat & Lng fields or from a Lat-Lng single field where the 2 values are separated by a comma
It is possible to populate a Map from a Json API source (Local or Remote), you just have to set the API URL or Json File, the Json Fields , the root and Key Field (Primary Key)