If you have a WordPress site and want to add a map with a 360-degree panorama view, Essential Addons is one of the plugins you can use. Essential Addons is a premium Elementor add-on. It adds extra widgets to your Elementor, including EA Google Map that you can use to add a map from Google Maps. There are 8 map types supported by EA Google Map. Panorama is one of which.
A panorama map allows you to provide a 360-degree virtual tour over a certain area (place). This map type is great to promote places like a zoo, a beach, a landmark, or other kinds of places.
In this article, we will show you how to add a map from Google Maps and set it to display a 360-degree panorama view. Before getting started, make sure to install both Elementor and Essential Addons first. You can use the free version of Elementor. While for Essential Addons, you need to use the premium version since the EA Google Map widget is only available on the pro version. You can visit this article to learn more about Essential Addons.
Integrating Essential Addons and Google Maps
Before being able to add a map from Google Maps to your website using Essential Addons, you need to integrate them first. You need a Google Maps API key to integrate Google Maps and Essential Addons. You can get the Google Maps API key via Google API Console. So, visit Google API Console and login with your Google account. Once logged in, create a new project by clicking the dropdown menu on the top side and click NEW PROJECT.
Give your new project a name and click the CREATE button.
Once your new project is created, select it via the dropdown menu on the top side and click Library on the left panel to enable the required APIs (Google divides Google Maps API into 15 types).
Click the VIEW ALL link on the Maps section to display all APIs.
The APIs required by Essential Addons are:
- Directions API
- Geocoding API
- Maps JavaScript API
- Places API
To enable an API, simply select an API (by clicking it) and click the ENABLE button.
Once done enabling the required APIs, return to the main dashboard of Google API Console and click Credentials on the left panel (you can click the Google API logo to return to the main dashboard. ). Click the Create credentials button and select API key. Copy the API key on the appearing popup.
Login to your WordPress dashboard and click Essential Addons on the left panel. Click the Elements tab and scroll down to the Advanced Google Map section and click Settings. Paste the API key you have just copied.
Click the SAVE CHANGES button to apply the new changes you made.
Start adding the map
Create a new page (Pages -> Add New) or post (Posts -> Add New) and edit it with Elementor.
Before start diting the page, set the page layout first by clicking the gear icon on the bottom-left corner. Set the page layout from the dropdown menu on Page Layout.
Add a new section by clicking the plus button on the canvas area and drag the EA Google Map widget.
As you can see, you will instantly have a map. Now go to the left panel. On the Google Map Type section under the General Settings option under the Content tab, select Panorama.
Visit Google Maps and search for the place you want to add it to your map. Right-click the Map’s pinpoint and select What’s Here?
A popup will appear at the bottom side with the coordinates that are required for your preferred place. Copy the Latitude (the first value), and Longitude (the second value).
Return to the Elementor editor and paste the Latitude and Longitude to the respective fields.
Until here, you have successfully added a map with a 360-degree panorama view. Open the Map Controls option to disable/enable the control options on your map.
To set the width and the height of the map, you can go to the Style tab.
A little note. If you see a “For Development Purposes Only” message when adding a map, make sure to enable your Google Cloud billing. The new Google policy requires developers to enable the billing account (you can still you Google Maps API for free). Read this article to learn more.