How about browsing through the Google Street View panoramas, but not with your mouse or trackpad, not even with your fingers, but with your mobile device, moving it like a window to the world ?…
Enter a location or let the site show you a random one and then, visit it like you were inside it, by moving your mobile up and down, left and right, turning around …
The idea
I got the idea of this project about 3 months ago, after attending to the HTML5 & CSS3 meetup at Criteo, where the Biborg agency showed their work on the Assassin’s Creed IV Black Flag (there was a little part where they used the HTML5 API compass to show and slide an image of a beach – sorry, couldn’t retrieve it). So I decided to take it to a whole other level : real panoramas and any panoramas ! And moreover, something modular and reusable by developers.
So, Topheman Street View is a demo of what you can do with the library I came up with :
PanoramaSensorsViewer
I will make a full blog post about PanoramaSensorsViewer. For the moment you can checkout the API Doc and the examples I made on the github repository (it’s open-source, MIT Licensed, so go fork it).
In a few words, with PanoramaSensorsViewer :
- you can display Google Street View panoramas (even inject your own custom panoramas since you have total access to the Google Maps API)
- you don’t have to worry about the gyroscope+accelerometer events (
deviceorientation) as well as the rotation/orientation of your device, PanoramaSensorsViewer does it for you
This works directly inside your browser (it’s only HTML5/JavaScript), so no need to install any webapp.
Conclusion
Topheman Street View is not here to replace in any way the user interface of Street View you have in Google Maps, it’s here to demonstrate the possibilities of PanoramaSensorsViewer. You can imagine many use cases, for example :
- you buy a night in a hotel online, you can snap a QR-Code to visit your room
- you buy a trek online, you can browse the panorama of each place you’ll stay at night
I had fun developing it and I’ll try to improve it. It works great on iOs devices, there are some issues on Android (unfortunatly, I can’t do much about it, however it may be fixed in future versions).
Tophe
PS : You want to try the custom panorama part ?… Just follow this link and go inside the office … 😉
I would like to develop an application using google street. I will upload images in my application. The users of my application will then be able to view the uploaded images like google street view. for example, we can see images in the link below
https://www.google.com.bd/maps/@27.1748191,78.0421102,3a,75y,356h,90t/data=!3m8!1e1!3m6!1soMmPsq-Lu40AAAGuoZNrng!2e0!3e2!6s%2F%2Fgeo2.ggpht.com%2Fcbk%3Fpanoid%3DoMmPsq-Lu40AAAGuoZNrng%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D86%26h%3D86%26yaw%3D356.0719%26pitch%3D0!7i13312!8i6656!6m1!1e1?hl=bn
I saw your demo “custompanorama.html” on GitHub. But problem is there is no arrow icon.
How can I develop the arrow icon in “custompanorama.html”.
If you don’t mind My Skype Id is “kmmuradbd”.
Can you please add me?
How can i develop like this.?
can you please help me?
Hie Murad,
Checkout the last example:
* http://labs.topheman.com/PanoramaSensorsViewer/demo.custompanorama.tiles.html
* Sources: https://github.com/topheman/PanoramaSensorsViewer/blob/master/src/demo.custompanorama.tiles.html#L99
You’ll see that, in the success callback,
thisis the Google Street View Panorama (on which you’ll be able to add those arrows – which in fact arelinksbetween panoramas). Take a look at the API doc of PanoramaSensorsViewer.If you have some troubles at this step, I strongly advise you to repeat the examples provided by the google team here: https://developers.google.com/maps/documentation/javascript/examples/streetview-custom-tiles to get a better understand of the way custom panoramas behave in Google Street View.
Once you’ll be comfortable with that, you’ll be able to put it all back into PanoramaSensorsViewer (or not, I didn’t quite catch if you were to use the library at the end).
I hope it will help you. I’m sorry, I don’t offer free consulting on this project, all the code remains free and open-source, you’re welcome to use it / share it / contribute.