Google Street View in Your Apps

1,332 views

Published on

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.

Published in: Technology, Business
  • Be the first to comment

Google Street View in Your Apps

  1. 1. Using Google Street View in Your Apps Mano Marks plus.google.com/+ManoMarks Kasia Derc-Fenske plus.google.com/+KasiaDercFenske
  2. 2. Kasia Mano
  3. 3. [NEW!] Google Maps Embed goo.gl/pkn9t1 new Google Maps: goo.gl/JZW10M
  4. 4. A long journey history of Street View
  5. 5. Business Photos Custom Panoramas
  6. 6. Street View Partner Program maps/about/partners/streetview/business/
  7. 7. Street View Trekker maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
  8. 8. Be the Next Trekker maps/about/partners/streetview/trekker
  9. 9. Street View car maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
  10. 10. Street View Trolley maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
  11. 11. Street View Snowmobile maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
  12. 12. Street View Trike maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html
  13. 13. We did not stop there www.google.com/maps/views/streetview
  14. 14. Street View on Rails
  15. 15. Collecting Imagery
  16. 16. Aligning Imagery
  17. 17. Turning the image into a 360 degree panorama
  18. 18. Read more on www.google.com/maps/about/behind-the-scenes/streetview
  19. 19. Coverage
  20. 20. Why should you care
  21. 21. Google Building 100, Brandschenkestrasse 100, 8002 Zürich
  22. 22. Google Zurich office
  23. 23. inside...
  24. 24. How to I make it happen?
  25. 25. It’s already there!
  26. 26. Duomo? a Panorama Div
  27. 27. proper heading
  28. 28. What is pitch? 60 30 0
  29. 29. Cool! So I can just use the panoID ? NO
  30. 30. calculated heading
  31. 31. How do I point to stuff?
  32. 32. demo
  33. 33. Making it Yours
  34. 34. It’s not yours until you add your data
  35. 35. 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
  36. 36. Custom Views
  37. 37. Custom Views
  38. 38. Custom Views It’s Really Yours!
  39. 39. Adding a View Panorama JS function initialize() { var myPanoid = "8F1zezo7O_8AAAALCpp9NA"; var panoramaOptions = { pano: myPanoid, pov: { heading: 45, pitch:-2 }, zoom: 1 };
  40. 40. Full-on Custom Panoramas
  41. 41. Ostriches!
  42. 42. 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
  43. 43. 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
  44. 44. 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 });...
  45. 45. Taking it Mobile
  46. 46. Overlays Objective C CLLocationCoordinate2D position = CLLocationCoordinate2DMake(48.858,2.294); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.panoramaView = panoView_; marker.map = mapView_;
  47. 47. Adding a View Panorama iOS NSString *myPano = @"8F1zezo7O_8AAAALCpp9NA"; [view_ moveToPanoramaID:myPano];
  48. 48. Google is hiring developers, including in Milan! http://opn.to/a/codemotion2013
  49. 49. Questions? more info: http://developers.google. com/maps

×