[Custom Street View] Help in linking my Panoramas.

75 views
Skip to first unread message

Nitin Jain

unread,
Apr 7, 2016, 12:16:04 AM4/7/16
to Google Maps Image APIs
Hello,
I'm new to this forum.
I'm making a Custom Street View of My Town using Google Maps API, I have found a way to add Street View to my Website.
But I don't know how to add my panoramas to it, when I open that html file, it displays panorama from Google, but I wan't my panoramas to it.

The Code is Here :

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View panoramas</title>
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initPano() {
        // Set up Street View and initially set it visible. Register the
        // custom panorama provider function. Set the StreetView to display
        // the custom panorama 'reception' which we check for below.
        var panorama = new google.maps.StreetViewPanorama(
          document.getElementById('map'), {
            pano: 'reception',
            visible: true,
            panoProvider: getCustomPanorama
        });
      }

      // Return a pano image given the panoID.
      function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
        // Note: robust custom panorama methods would require tiled pano data.
        // Here we're just using a single tile, set to the tile size and equal
        // to the pano "world" size.
      }

      // Construct the appropriate StreetViewPanoramaData given
      // the passed pano IDs.
      function getCustomPanorama(pano, zoom, tileX, tileY) {
        if (pano === 'reception') {
          return {
            location: {
              pano: 'reception',
              description: 'Google Sydney - Reception'
            },
            links: [],
            // The text for the copyright control.
            copyright: 'Imagery (c) 2010 Google',
            // The definition of the tiles for this panorama.
            tiles: {
              tileSize: new google.maps.Size(1024, 512),
              worldSize: new google.maps.Size(1024, 512),
              // The heading in degrees at the origin of the panorama
              // tile set.
              centerHeading: 105,
              getTileUrl: getCustomPanoramaTileUrl
            }
          };
        }
      }
    </script>
    <script async defer
    </script>
  </body>
</html>

I currently have 3 Panoramas of a street in India, Here 

PANO_1

PANO_1


PANO_2


PANO_2


PANO_3

 

PANO_3


I want to know how to set these Images to Show up in the Street View and Navigate through them using Arrows...?


The locations of the Three Panoramas are in this Map. MAP is HERE.





Can you help with the Codes and Panorama? 



Mark MᶜDonald

unread,
Apr 7, 2016, 8:10:23 PM4/7/16
to Google Maps Image APIs
You might find this tool useful, where you can upload your photo sphere JPGs and it will generate a page for you: http://street-sphere.appspot.com/

Additionally, this sample shows you how to link a custom panorama from Google's basemap imagery: https://developers.google.com/maps/documentation/javascript/examples/streetview-custom-tiles

Feel free to ask here, but both of my suggestions are a little beyond the scope of this list, so you might find some more relevant help on the google-maps-js-api-v3 list. Or if it's just general coding help you need, then ask on Stack Overflow: https://stackoverflow.com/questions/tagged/google-maps-api-3+google-street-view


--
You received this message because you are subscribed to the Google Groups "Google Maps Image APIs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-maps-image...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages