Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Gallery lightbox - inserting Street View

5 years 6 months ago #1

  • Mathias's Avatar
  • Mathias
  • Posts: 21
Hi!

I wonder if there is a way to add Google Street View inside Gallery lightbox. Instead of the picture I would like to have the Street View interactive map.
I tried pasting the Google code inside the embed code feature but it does not work.

Here is the code I'm trying to past for trying it out.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #street-view {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="street-view"></div>
    <script>
      var panorama;
      function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
              position: {lat: 37.869260, lng: -122.254811},
              pov: {heading: 165, pitch: 0},
              zoom: 1
            });
      }
    </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
    </script>
  </body>
</html>

I have tried with my API-key also. Thank you in advance.

Regards
Mathias

5 years 6 months ago #2

  • Artem's Avatar
  • Artem
  • Posts: 9812
Hi Mathias,

Use this website to generate code: ctrlq.org/maps/embed/

here is example:
<iframe width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://my.ctrlq.org/maps/#street|1|26.683206872389597|-0.6532902767666258|40.70619501986253|-74.00328607331528"></iframe>



Regards,

5 years 6 months ago #3

  • Mathias's Avatar
  • Mathias
  • Posts: 21
Hi!

Thank you, that worked very good.

I just wonder if there is a way to get that Iframe directly from Google website and not from third party.

Regards
Mathias

5 years 6 months ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23004
Hello,

More details you can learn at the google documentation
https://developers.google.com/maps/documentation/embed/guide?hl=en

Regards,
Vyacheslav, Balbooa.com

5 years 6 months ago #5

  • Mathias's Avatar
  • Mathias
  • Posts: 21
Hi!

Thanks alot I'll check that link.

Regards
Mathias

5 years 6 months ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23004
Hi!

You are welcome! :)

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum