Google Maps - Plugin
Google Maps plugin allows you to integrate Google Maps in your web application. It allows you to display different locations using maps.
Steps to Fetch Data from Firestore Cloud
#1: Go to the Google Cloud Console
Click this link and go to the Google Cloud Console for Google Maps and login to your account. Now click on the project name as shown in the image below.
#2: Create a New Project
If you have already created a project then open that project or create a new project by clicking on the “New Project” button.
#3. Fill the Details
Name the project, add your organisation’s name and its location. Once done, click the Create button.
#4. Open the Newly Created Project
Select the project you have newly created by selecting it in the dropdown list.
#5. Open Maps JavaScript API
After opening the project, you will land on the Maps APIs and Services page. To generate the API Key, open Maps JavaScript API option.
#6. Enable the Maps JavaScript API
After opening the Maps JavaScript API page, enable the API by clicking on the Enable button.
#7 Go to Credentials
After enabling the Maps JavaScript API, your screen will look as shown below in the image. Now go to the sidebar and click on Credentials.
#8. Create Credentials
Click on the Create Credentials button as shown below in the image.
#9. Open the API Key
When you click on the Create Credentials button, a dropdown list will open. Select the API Key option by clicking on it.
#10. Copy the API Key
As you select the API Key option, an API key will get automatically created. You have to copy the generated API key by clicking on the icon marked below in red.
#11. Open the Plugins
Now go back to the builder and open the plugins page by clicking on the Plugins tab (marked in red below).
#12. Install the Google Map Plugin
Scroll down and find the Google Maps plugin. Then click on the Install button to install it.
#13. Paste the API Key
As you click on the Install button, a field to enter the API Key will open. Paste the copied API Key and click the Install Plugin button.
#14. Go to Collections
After installing the plugin it will look as shown in the image below. After successfully installing the Google Maps plugin, open the Collections and go to the collection whose data you want to display in the form of maps.
#15. Edit the Collection
Ensure the collection has a text field for name or title of the location, a text field for description of the location and number fields for latitude and longitude of the location.
#16. Drag and Drop the Google Map Component
Now open the page where you want to display the map and drag and drop the Google Map component under the CMS category.
#17. Open the Google Map Settings
After dropping the google map component, open its setting by clicking on the setting icon as marked in red below. Under settings, select the collection that contains data. Also, select “All Items” in the filters field. Then map latitude, longitude, header (Title) and description fields as shown in the image below.
#18. Publish or Preview
Now save the changes and open the page in the preview or publish mode. You will see maps of the locations you added in the collection will get displayed in the Google Map.
Try this Plugin Now!
Using this plugin you can display all addresses using Google Maps and give your users a better idea of the location. So, install the plugin, follow the steps discussed above and integrate Google Maps in your web application within a few minutes.