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