How to Embed a Google 360 Tour

| , ,

Once you have your tour published to Google, the tour will show on your Google My Business listing in Maps, and can be accessed via Google Search as well. But to get the full value out of your tour, add the tour to your website.

Standard Google Embed

There are 2 ways to add the tour to your website. The first is the standard embed directly from Google Maps. This provides a static image of the first pano of the tour, and your visitors can click around inside the tour, display it full screen, or go to your Google Maps listing. 

While you can view the Google tour from Google Search, to get the embed code you need to go to Google Maps and locate your Google listing to capture the html embed code for your website. Here are the steps and a short video showing you how to accomplish this.

  1. Go to Google Maps
  2. Search for your Google Maps Business Listing
  3. Click on the first photo you see to go to the photos carousel
  4. Scroll down the list of photos on the left until you find the 360’s, aka panos. The panos are the ones with the circle/arrow on the lower left of the image.
  5. Pick which pano you would like to start your embedded tour with
  6.  Once the pano opens, adjust it to the point you want the tour to start.
  7. Make sure your verticals are perfectly straight. Looking up or down can cause more distortion, so make sure your walls are straight with the sides of the screen.
  8. Click on the 3 vertical dots by your business listing name in box the upper left of the pano. If you accessed your business listing from Google Search, you will not see the 3 dots. You need to start from Google Maps.
  9. Then click on Share or embed, and a new screen pops up.
  10. Click on Embed a map
  11. Click on the dropdown where it says Medium to adjust the embed window size and copy your code. You can select SmallMediumLarge, or Custom.
  12. For the Custom size, you can open a second preview window.
  13. Please note moving around in the Preview window does not update the code. So if you want to make an adjustment on the the view of the embedded tour, you need to make that change in the main screen first, then go back to Step 8.
  14. Once you are satisfied with the size and orientation of your first pano, then click COPY HTML.
  15. Paste this coding into a text file such as from Notepad for Windows or TextEdit for Mac, or other text editor for safe keeping.
  16. Add this html coding to a page or post on your website. Or send the code to your Webmaster to update your website for you.

AutoRotation Embed Code

UPDATE: This option is no longer included in my higher packages. Google has changed the way the map API works, and O get charged for use of the API. Sorry…It was great before the change. A hosted tour option is available to add this functionality outside of Google. Contact me if you are interested.
The second type of embed is with some custom javascript and a Maps API key which provide automatic rotation of the first pano.  I provide this coding as part of my Premier or higher packages, or as an add-on to the lower level packages. Here is an example of this custom coding.

 

1 thought on “How to Embed a Google 360 Tour”

Leave a Comment

Don`t copy text!


Fill out the form below for the quickest response. You can also call me at (832)754-7572 or email me.








    0
    "Preferred form of contact?"
    Phone callEmailTextNo preference

    Interested in Services (Please check):*
    EventsHeadshotsHeadshots BoothBranding Photos


    Lead Status

    Lead Source



    Schedule Your Headshot -Portrait Session



    Schedule Your Branding Session w/ Makeup



    Schedule Your Medical ERAS Headshot Session


    Schedule Your Corporate Headshot Session

    Fill out the form below for the quickest response. You can also call me at (832)754-7572 or email me.





      Interested in 360 Package/Options (Please check):*

      Custom TourPremierPreferredStarter

      Interested in Other Services (Please check):*

      ArchitectureInteriorsDroneVideoStaff PhotosProducts

      Lead Status

      Lead Source


      Schedule Your 5-Look Actor Session


      Schedule Your 3-Look Actor Session


      Schedule Your 2- Look Actor Session


      Schedule Your 1- Look Actor Session

      Sign Up for Headshot Tips in your Email.






        0


        Company

        Lead Status

        Lead Source


        Same Day Headshot


        Same Day Headshot Weekend


        Schedule Your P4P Session



        Schedule your Express Headshot Session



        Schedule a Call with Dee



        Fill out the form below for the quickest response. You can also call me at (832)754-7572 or email me.

          Note: You will receive a copy of this form in your email.








          0
          "Preferred form of contact?"
          Phone callEmailTextNo preference

          Interested in Services (Please check):*

          General InquiryArch/Interiors360 Virtual TourDrone Photo/VideoEventsHeadshotsHeadshot BoothBranding PhotosVideo


          Lead Status

          Lead Source

          Description2
          [textarea Description2} "@DZP Web Gen-"[cf7_serial_number_76692]" | "[first-name] [your-name]" | "[your-business]" | "[checkbox-823]"
          "[your-message]"
          [/textarea]

          Request Pricing and Online Scheduling







            "Preferred form of contact?"
            Phone callEmailTextNo preference


            0


            Lead Status

            Lead Source

            Service Interest
            Headshots