Google Maps
Last updated
Last updated
In order to use the and , 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:
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.
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:
Instead of editing the ready styles, you can begin from the scratch through Create a Style menu.
To learn more, see this article in Google .
Now we can test the obtained Google Maps API by inserting the and s into the page.
A detailed description of the widget can be found .
A detailed description of the widget can be found .
When maps are embedded using the , Google has its own default styles for the maps:
Custom styles for Google Maps can be created with the help of the so that the appearance of the map matches the styles of the site.
To do that, let's visit the and popular ready map styles will be offered.
There we can copy the ready Map style by clicking "Expand code" to use in our or customize it by clicking the brush button "". Before copying we will make some changes:
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 style settings.
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 "":
After making changes it is necessary to copy the JavaScript Style Array code to use in the style settings.
You can share the Custom Map style in the community by on Snazzy Maps.
