Google Maps
Last updated
Last updated
In order to use the Contact Info widget and Google Maps Widget, you must first create an API key. You also need a project with a billing account and the Maps Embed API enabled. Once completed, navigate to Elementor > Settings > Integrations and enter the key:
To learn more, see this article in Google Set up Cloud Console.
From the Google Cloud Platform, create a New Project
Name your project using a unique name (note: this cannot be changed later)
Fill out your Organization's name
Enter the location of your project
We will now need to set up billing information for your project. You may do this from the Left Panel > Billing
Select a Country that applies to your project
Agree to Terms of Service
Click Continue
In the second step, you need to verify your Contact information:
After receiving the verification code confirm it:
Select an Account type
Enter a Business Name
Select a Payment Method
Enter your Payment information as chosen above (example: credit card)
Click the Start My Free Trial button, and you can return the project dashboard. Your billing information is now complete for this project.
From the APIs and Services > Credentials Tab, click the + Create Credentials link and select the API key:
You will now get an API key. For your protection, it is best to restrict this key from being used elsewhere:
We can now associate applications to be used with your key. From the APIs and Services dashboard click library
In the search box type in Maps. You will need the Maps Embed API for the Elementor Widget. Select this in the list below and Enable.
Click the Enable Maps Embed API Button
Then search for Maps JavaScript API:
Click the Enable Maps JavaScript API Button:
This will now show in your list of available APIs and start collecting data
You may now navigate to Elementor > Settings > Integrations and place the key in order to use the Maps Widget.
Now we can test the obtained Google Maps API by inserting the Contact Info widget and Google Maps Widgets into the page.
A detailed description of the widget can be found here.
A detailed description of the widget can be found here.
When maps are embedded using the Contact Info Widget, Google has its own default styles for the maps:
Custom styles for Google Maps can be created with the help of the Snazzy Maps service so that the appearance of the map matches the styles of the site.
To do that, let's visit the official website of the service and popular ready map styles will be offered.
By selecting one of the popular styles we can customize it to match our website styles or use it without changes:
After selecting the map style, a single page with several options will appear:
Map layers are arranged hierarchically and allow you to customize elements individually. After making changes it is necessary to copy the JavaScript Style Array code to use in the Contact Info Widget style settings.
Instead of editing the ready styles, you can begin from the scratch through Create a Style menu.
After making changes it is necessary to copy the JavaScript Style Array code to use in the Contact Info Widget style settings.
You can share the Custom Map style in the community by creating an account on Snazzy Maps.
There we can copy the ready Map style by clicking "Expand code" to use in our Contact Info Widget or customize it by clicking the brush button "". Before copying we will make some changes:
On the opened window you can customize the map layers by choosing hierarchically arranged elements. The layers where settings are applied will be marked with a green dot "":
