Want to find out how to create a 360 degree virtual tour in WordPress with the help ofElementor?
Google Street View technology allows you to virtually walk around a certain area without physically being there. For example, you can practically see the environment around Kuta Beach in Bali while you are physically in your apartment in London.
For some places — such as the Louvre in Paris — Google Street View can even cover an indoor virtual tour.
If you have a WordPress based website, you can easily create a 360 degree walkthrough feature on your website without coding.
Offering a 360-degree virtual tour is a great idea for businesses like a zoo, tourist attraction, or restaurant because it allows your visiteurs to virtually see the environment around your location.
See also: How to Use Elementor's Posts Widget
As mentioned, you can add a 360 degree walkthrough feature in your WordPress website without coding. You can accomplish this using the following plugins:
How to Create a 360 Degree Virtual Tour in WordPress Using Essential Addons
Before you start, make sure you have installed Elementor and Essential Addons. You can download Elementor (you can use the free version) on the official repository of WordPress plugins. While for essential add-ons, 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 with 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 sign in with your Google account. If you don't have a project yet, create a new project by clicking the drop-down list at the top of the main dashboard of the Google API Console and click the button NEW PROJECT on the window that appears.
Give your new project a name and click the button CREATE .
Once your new project has been created, select it via the drop-down menu at the top and click on Library on the left panel.
The Google Maps API is divided into 17 types. You can click on the link SHOW ALL in the section Cards to see them all.
To be able to use Essential Addons, you need to enable the following APIs:
- API Directions
- Geocoding API
- Maps JavaScript API
- Places API
To activate an API, select the API concerned (by clicking on it) and click on the button ACTIVATE.
Once you have completed enabling the required APIs, return to the main dashboard of the Google API Console and click Identifiers on the left panel. Click on the button Create credentials and select API key. Copy the API key on the popup that appears.
Once you have obtained the API key, log in to your WordPress dashboard and navigate to the Essential Addons Settings page by clicking on the menu Essential Addons on the left sidebar.
Go to tab Elements and scroll down in the section Dynamic Content Elements. Click on Setting of the widget Advanced Google Maps and paste your Google API key. Click on the button SAVE SETTING to apply the change.
Step 2: start creating the 360 degree virtual tour
Create a new page (Pages – > Add) or a new item (Items – > Add) and edit it with Elementor. Before you start creating the page, you can first define the layout.
Discover also: How to Add Related Items in Elementor
To do this, open the Settings panel by clicking the gear icon in the lower left corner. Set the Layout from the drop-down menu Layout.
Add a new section by clicking the plus icon in the edit box and add the Google EA map in it.
Under the option General Settings tab Contents , change the map type to Panorama.
Open Google Maps in a new tab and find where you want to create the virtual tour. Right click on the pin location and left click now on the first context menu item that appears. This allows you to copy latitude (the first value) and longitude (the second value).
Go back to the tab Content and paste the latitude as well as the longitude in the respective fields.
open option Map Controls to enable/disable the card controls you want to provide. You can also set the initial zoom level.
Go to the tab Style to define the width as well as the height of your card.
Click on the button PUBLISH to publish your map.
NOTE: If the map is not loaded after dragging the widget EA Google Maps in the editor and you see a message “For development purposes only”, make sure to activate your Google Cloud billing.
The new Google policy requires developers to activate the billing account (you can still use the Google Maps API for free).
Get Elementor Pro Now!!!
Conclusion
Here ! That's it for this article that shows you how create a 360 degree virtual tour in WordPress. If you have any concerns about how to get there, let them know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
