google street view in your apps
DESCRIPTION
Google Street View is growing it’s coverage around the world. We have data in for streets, inside businesses, at landmarks and parks, and even underwater. In this talk, we’ll briefly cover how Google collects Street View data and how you can contribute. Then we’ll talk about how you can integrate Street View into your web and mobile applications. We’ll cover the Google Maps APIs for JavaScript and Android, and the Google Maps SDK for iOS. We’ll even show you how to use your own custom panoramas.TRANSCRIPT
![Page 1: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/1.jpg)
![Page 2: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/2.jpg)
Using Google Street View in Your AppsMano Marksplus.google.com/+ManoMarks
Kasia Derc-Fenske plus.google.com/+KasiaDercFenske
![Page 3: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/3.jpg)
Mano
Kasia
![Page 4: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/4.jpg)
[NEW!] Google Maps Embed goo.gl/pkn9t1
new Google Maps: goo.gl/JZW10M
![Page 5: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/5.jpg)
history of Street ViewA long journeyA long journey
![Page 6: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/6.jpg)
Business Photos Custom Panoramas
![Page 7: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/7.jpg)
Street View Partner Programmaps/about/partners/streetview/business/
![Page 8: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/8.jpg)
Street View Trekker
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
![Page 9: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/9.jpg)
Be the Next Trekkermaps/about/partners/streetview/trekker
![Page 10: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/10.jpg)
Street View car
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
![Page 11: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/11.jpg)
Street View Trolley
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
![Page 12: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/12.jpg)
Street View Snowmobile
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
![Page 13: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/13.jpg)
Street View Trike
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
![Page 14: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/14.jpg)
We did not stop therewww.google.com/maps/views/streetview
![Page 15: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/15.jpg)
Street View on Rails
![Page 16: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/16.jpg)
Collecting Imagery
![Page 17: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/17.jpg)
Aligning Imagery
![Page 18: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/18.jpg)
Turning the image into a 360 degree panorama
![Page 19: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/19.jpg)
www.google.com/maps/about/behind-the-scenes/streetview Read more on
![Page 20: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/20.jpg)
Coverage
![Page 21: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/21.jpg)
Why should you care
![Page 22: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/22.jpg)
Google Building 100, Brandschenkestrasse 100, 8002 Zürich
![Page 23: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/23.jpg)
![Page 24: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/24.jpg)
Google Zurich office
![Page 25: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/25.jpg)
inside...
![Page 26: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/26.jpg)
How to I make it happen?
![Page 27: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/27.jpg)
It’s already there!
![Page 28: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/28.jpg)
a Panorama Div
Duomo?
![Page 29: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/29.jpg)
proper heading
![Page 30: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/30.jpg)
30
60
0
What is pitch?
![Page 31: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/31.jpg)
![Page 32: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/32.jpg)
Cool! So I can just use the panoID ?
NO
![Page 33: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/33.jpg)
calculated heading
![Page 34: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/34.jpg)
How do I point to stuff?
![Page 35: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/35.jpg)
demo
![Page 36: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/36.jpg)
Making it Yours
![Page 37: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/37.jpg)
It’s not yours until you add your data
![Page 38: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/38.jpg)
JS
Overlays
var busMarker = new google.maps.Marker({ position: MyPlace, map: map, icon: 'http://example.com/mymapmarker.png', title: 'MyTitle' });
panorama = map.getStreetView(); panorama.setPosition(astorPlace); panorama.setPov({ heading: 265, pitch:0} );}
![Page 39: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/39.jpg)
Custom Views
![Page 40: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/40.jpg)
Custom Views
![Page 41: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/41.jpg)
Custom Views It’s Really Yours!
![Page 42: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/42.jpg)
JS
Adding a View Panorama
function initialize() { var myPanoid = "8F1zezo7O_8AAAALCpp9NA"; var panoramaOptions = { pano: myPanoid, pov: { heading: 45, pitch:-2 }, zoom: 1 };
![Page 43: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/43.jpg)
Full-on Custom Panoramas
![Page 44: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/44.jpg)
![Page 45: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/45.jpg)
Ostriches!
![Page 46: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/46.jpg)
![Page 47: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/47.jpg)
JS
Adding a Custom Panorama part 1
var mapOptions = { center: sydneyOffice, zoom: 16 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); panorama = map.getStreetView(); var panoOptions = { position: sydneyOffice, visible: true, panoProvider: getCustomPanorama } panorama.setOptions(panoOptions); google.maps.event.addListener(panorama, 'links_changed', createCustomLinks);}
function getCustomPanoramaTileUrl(pano,zoom,tileX,tileY) { return 'images/panoReception1024-' + zoom + '-' + tileX + '-' +tileY + '.jpg';}
![Page 48: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/48.jpg)
JS
Adding a Custom Panorama part 2
function getCustomPanorama(pano,zoom,tileX,tileY) { var center; switch(pano) { case 'reception': return { location: { pano: 'reception', description: "Google Sydney - Reception", latLng: sydneyOffice }, links: [ ], copyright: 'Imagery (c) 2010 Google', tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(1024, 512), centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl } ...
![Page 49: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/49.jpg)
JS
Adding a Custom Links
function createCustomLinks() {
if (entryPanoId) { var links = panorama.getLinks(); var panoId = panorama.getPano(); switch(panoId) { case entryPanoId: links.push({ 'heading': 25, 'description' : 'Google Sydney', 'pano' : 'reception' }); break; case 'reception': links.push({ 'heading': 195, 'description' : 'Exit', 'pano' : entryPanoId });...
![Page 50: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/50.jpg)
Taking it Mobile
![Page 51: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/51.jpg)
Objective C
Overlays
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(48.858,2.294);GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.panoramaView = panoView_;
marker.map = mapView_;
![Page 52: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/52.jpg)
![Page 53: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/53.jpg)
iOS
Adding a View Panorama
NSString *myPano = @"8F1zezo7O_8AAAALCpp9NA";
[view_ moveToPanoramaID:myPano];
![Page 54: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/54.jpg)
![Page 55: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/55.jpg)
![Page 56: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/56.jpg)
http://opn.to/a/codemotion2013
Google is hiring developers, including in Milan!
![Page 57: Google Street View in Your Apps](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554be58db4c90556328b4a79/html5/thumbnails/57.jpg)
Questions?
more info: http://developers.google.com/maps