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.

2. Using Google Street View
in Your Apps
Mano Marks
plus.google.com/+ManoMarks
Kasia Derc-Fenske
plus.google.com/+KasiaDercFenske

3. Kasia
Mano

4. [NEW!] Google Maps Embed goo.gl/pkn9t1
new Google Maps: goo.gl/JZW10M

5. A long journey
history of Street View

6. Business Photos
Custom Panoramas

7. Street View Partner Program
maps/about/partners/streetview/business/

8. Street View Trekker
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

9. Be the Next Trekker
maps/about/partners/streetview/trekker

10. Street View car
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

11. Street View Trolley
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

12. Street View Snowmobile
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

13. Street View Trike
maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

14. We did not stop there
www.google.com/maps/views/streetview

15. Street View on Rails

16. Collecting Imagery

17. Aligning Imagery

18. Turning the image into a 360 degree panorama

19. Read more on
www.google.com/maps/about/behind-the-scenes/streetview

20. Coverage

21. Why should you care

22. Google Building 100,
Brandschenkestrasse 100,
8002 Zürich

24. Google Zurich office

25. inside...

26. How to I make it happen?

27. It’s already there!

28. Duomo?
a Panorama Div

29. proper heading

30. What is pitch?
60
30
0

32. Cool! So I can just use the panoID ?
NO

33. calculated heading

34. How do I point to stuff?

35. demo

36. Making it Yours

37. It’s not yours until you add your data

38. 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}
);
}
JS

39. Custom Views

40. Custom Views

41. Custom Views
It’s Really Yours!

42. Adding a View Panorama
JS
function initialize() {
var myPanoid = "8F1zezo7O_8AAAALCpp9NA";
var panoramaOptions = {
pano: myPanoid,
pov: {
heading: 45,
pitch:-2
},
zoom: 1
};

43. Full-on Custom Panoramas

45. Ostriches!

47. 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';
}
JS

48. 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
} ...
JS

49. Adding a Custom Links
JS
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
});...

50. Taking it Mobile

51. Overlays
Objective C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(48.858,2.294);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.panoramaView = panoView_;
marker.map = mapView_;

53. Adding a View Panorama
iOS
NSString *myPano = @"8F1zezo7O_8AAAALCpp9NA";
[view_ moveToPanoramaID:myPano];

56. Google is hiring developers, including in Milan!
http://opn.to/a/codemotion2013

57. Questions?
more info: http://developers.google.
com/maps