If you have an Elementor-powered WordPress site, you can easily create a 360-degree virtual tour feature to your website without coding. Providing a 360-degree virtual tour is a great idea for businesses like a zoo, tourist attraction or restaurant since it allows your potential visitors to virtually see the environment around your business location.
As mentioned, you can add a 360-degree virtual tour feature in your WordPress site without coding. You can accomplish it using the following plugins:
- Elementor
- Essential Addons
How to Create a 360-Degree Virtual Tour in WordPress Using Essential Addons
Before getting started, make sure you have installed both Elementor and Essential Addons. You can download Elementor (you can use the free version) on the official WordPress plugin repository. While for Essential Addons, you can get it on its official website.
Step 1: Integrating Essential Addons with Google Maps
The very first thing you need to do after installing Elementor and Essential Addons is integrating Essential Addons and Google Maps. You can integrate them using a Google Maps API key.
To create a Google Map API key, first, visit Google API Console and login with your Google account. If you have no project yet, create a new project by clicking the dropdown on the top side of the Google API Console main dashboard and click the NEW PROJECT button on the appearing window.
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.
The Google Maps API is divided into 15 types. You can click the VIEW ALL link on the Maps section to view them all. In order to be able to use Essential Addons, you need to enable the following APIs:
- Directions API
- Geocoding API
- Maps JavaScript API
- Places API
To enable an API, select the concerned 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. Click the Create credentials button and select API key. Copy the API key on the appearing popup.
Once you got the API key, login to your WordPress dashboard and go to Essential Addons Settings page by clicking the Essential Addons menu on the left panel.
Go to the Elements tab and scroll down to the Dynamic Content Element section. Click Settings on the Advanced Google Map widget and paste your Google API key. Click the SAVE SETTINGS button to apply the change.
Step 2: Start Creating the 360-Degree Virtual Tour
Create a new page (Pages -> Add New) or post (Posts -> Add New) and edit it with Elementor. Before you start creating the page, you can set the page layout first. To do so, open the Settings panel 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 icon on the canvas area and add the EA Google Map to the canvas.
Under the General Settings option under the Content tab, change the map type to Panorama.
Open Google Maps on a new tab and search for the place you want to create the virtual tour of. Right-lick the pin location and select What’s here.
A little box should appear on the bottom side of the Google Maps page. Copy the latitude (the fist value) and the longitude (the second value).
Return to the WordPress tab and paste the latitude as well as the longitude to the respective fields.
Open the Map Controls option to enable/disable the map controls you want to provide. You can also set the initial zoom level.
You can go to the Style tab to set the width as well as the height of your map.
Click the PUBLISH button to publish your map.
NOTE: If the map is not loaded after you drag the EA Google Map widget to the canvas area and you see a “For Development Purposes Only” message, 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 fix the issue.
