google street view in your apps

57

Upload: codemotion

Post on 08-May-2015

689 views

Category:

Technology


6 download

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
Page 2: Google Street View in Your Apps

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

Mano

Kasia

Page 4: Google Street View in Your Apps

[NEW!] Google Maps Embed goo.gl/pkn9t1

new Google Maps: goo.gl/JZW10M

Page 5: Google Street View in Your Apps

history of Street ViewA long journeyA long journey

Page 6: Google Street View in Your Apps

Business Photos Custom Panoramas

Page 7: Google Street View in Your Apps

Street View Partner Programmaps/about/partners/streetview/business/

Page 8: Google Street View in Your Apps

Street View Trekker

maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

Page 9: Google Street View in Your Apps

Be the Next Trekkermaps/about/partners/streetview/trekker

Page 10: Google Street View in Your Apps

Street View car

maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

Page 11: Google Street View in Your Apps

Street View Trolley

maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

Page 12: Google Street View in Your Apps

Street View Snowmobile

maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

Page 13: Google Street View in Your Apps

Street View Trike

maps.google.com/intl/en/help/maps/streetview/technology/cars-trikes.html

Page 14: Google Street View in Your Apps

We did not stop therewww.google.com/maps/views/streetview

Page 15: Google Street View in Your Apps

Street View on Rails

Page 16: Google Street View in Your Apps

Collecting Imagery

Page 17: Google Street View in Your Apps

Aligning Imagery

Page 18: Google Street View in Your Apps

Turning the image into a 360 degree panorama

Page 20: Google Street View in Your Apps

Coverage

Page 21: Google Street View in Your Apps

Why should you care

Page 22: Google Street View in Your Apps

Google Building 100, Brandschenkestrasse 100, 8002 Zürich

Page 23: Google Street View in Your Apps
Page 24: Google Street View in Your Apps

Google Zurich office

Page 25: Google Street View in Your Apps

inside...

Page 26: Google Street View in Your Apps

How to I make it happen?

Page 30: Google Street View in Your Apps

30

60

0

What is pitch?

Page 31: Google Street View in Your Apps
Page 32: Google Street View in Your Apps

Cool! So I can just use the panoID ?

NO

Page 34: Google Street View in Your Apps

How do I point to stuff?

Page 36: Google Street View in Your Apps

Making it Yours

Page 37: Google Street View in Your Apps

It’s not yours until you add your data

Page 38: Google Street View in Your Apps

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 40: Google Street View in Your Apps

Custom Views

Page 41: Google Street View in Your Apps

Custom Views It’s Really Yours!

Page 42: Google Street View in Your Apps

JS

Adding a View Panorama

function initialize() { var myPanoid = "8F1zezo7O_8AAAALCpp9NA"; var panoramaOptions = { pano: myPanoid, pov: { heading: 45, pitch:-2 }, zoom: 1 };

Page 44: Google Street View in Your Apps
Page 45: Google Street View in Your Apps

Ostriches!

Page 46: Google Street View in Your Apps
Page 47: Google Street View in Your Apps

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

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

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

Taking it Mobile

Page 51: Google Street View in Your Apps

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
Page 53: Google Street View in Your Apps

iOS

Adding a View Panorama

NSString *myPano = @"8F1zezo7O_8AAAALCpp9NA";

[view_ moveToPanoramaID:myPano];

Page 54: Google Street View in Your Apps
Page 55: Google Street View in Your Apps
Page 56: Google Street View in Your Apps

http://opn.to/a/codemotion2013

Google is hiring developers, including in Milan!