Your SlideShare is downloading. ×
Google Street View in Your Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Google Street View in Your Apps

657
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 …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
657
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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