Das Web Wird Mobil - Geolocation und Location Based Services

83
das web wird mobil Stephan Schmidt, 1&1 Internet AG International PHP Conference 2012 Hotel Maritim proArte, Berlin

description

Vortrag auf der International PHP Conference 2012 Spring Edition zu Geolocation im Browser und Location Based Services wie Google Places und Foursquare

Transcript of Das Web Wird Mobil - Geolocation und Location Based Services

Page 1: Das Web Wird Mobil - Geolocation und Location Based Services

das web wird mobilStephan Schmidt, 1&1 Internet AG

International PHP Conference 2012Hotel Maritim proArte, Berlin

Page 2: Das Web Wird Mobil - Geolocation und Location Based Services

beiArbeit

Page 3: Das Web Wird Mobil - Geolocation und Location Based Services

Sport

Page 4: Das Web Wird Mobil - Geolocation und Location Based Services

und Spiel

Page 5: Das Web Wird Mobil - Geolocation und Location Based Services

ich suche cup-cakes in meiner nähe.

Page 6: Das Web Wird Mobil - Geolocation und Location Based Services

schritt eins:wo bin ich?

Page 7: Das Web Wird Mobil - Geolocation und Location Based Services

geolocation vor dem jahr 2008:

Page 8: Das Web Wird Mobil - Geolocation und Location Based Services

91.22.203.142

Page 9: Das Web Wird Mobil - Geolocation und Location Based Services
Page 10: Das Web Wird Mobil - Geolocation und Location Based Services

where the heck is oberderdingen?

Page 11: Das Web Wird Mobil - Geolocation und Location Based Services
Page 12: Das Web Wird Mobil - Geolocation und Location Based Services

google weiß ziemlich genau wo* ich bin.

* und zwar nicht in oberderdingen.

Page 13: Das Web Wird Mobil - Geolocation und Location Based Services

geolocation im jahr 2012:

Page 14: Das Web Wird Mobil - Geolocation und Location Based Services

48.96977,8.613199

geographische breite

geographische länge

Page 15: Das Web Wird Mobil - Geolocation und Location Based Services

längengrade

breitengrade

Page 16: Das Web Wird Mobil - Geolocation und Location Based Services

woher weiß mein browser das?

Page 17: Das Web Wird Mobil - Geolocation und Location Based Services

geolocation api

Page 18: Das Web Wird Mobil - Geolocation und Location Based Services
Page 19: Das Web Wird Mobil - Geolocation und Location Based Services

+

Page 20: Das Web Wird Mobil - Geolocation und Location Based Services

und etwas Magie!

Page 21: Das Web Wird Mobil - Geolocation und Location Based Services

die Magie ist aus javascript nutz-bar.

Page 22: Das Web Wird Mobil - Geolocation und Location Based Services

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition ( function(position) { // location retrieved }, function(error) { // error happened } );}

Page 23: Das Web Wird Mobil - Geolocation und Location Based Services
Page 24: Das Web Wird Mobil - Geolocation und Location Based Services
Page 25: Das Web Wird Mobil - Geolocation und Location Based Services

Geoposition coords : Coordinates accuracy : 65 // meter altitude : null altitudeAccuracy : null heading : null latitude : 52.518328398571434 longitude : 13.387145829999998 speed : null

Page 26: Das Web Wird Mobil - Geolocation und Location Based Services

PositionError code : 1 constructor : PositionErrorConstructor PERMISSION_DENIED : 1 POSITION_UNAVAILABLE : 2 TIMEOUT : 3 message: "User denied Geolocation"

Page 27: Das Web Wird Mobil - Geolocation und Location Based Services

navigator.geolocation.getCurrentPosition( function(position) {...}, function(error) {...}, { enableHighAccuracy : true, timeout : 5000, // milliseconds maximumAge : 1000 * 60 // milliseconds } );}

Page 28: Das Web Wird Mobil - Geolocation und Location Based Services

navigator.geolocation.watchPosition ( function(pos) { // position changed }, function(error) { // error happened })

Page 29: Das Web Wird Mobil - Geolocation und Location Based Services

9.0+ 3.5+ 5.0+ 5.0+ 10.6+

3.0+ 2.0+

Page 30: Das Web Wird Mobil - Geolocation und Location Based Services

where the heck is 52.51832,13.387145?

Page 31: Das Web Wird Mobil - Geolocation und Location Based Services

var latlon = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);var options = { zoom: 15, center: latlon, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map($("#map"), options);

var marker = new google.maps.Marker({ position: latlon, map: map, title:"Sie sind hier!"});

Page 32: Das Web Wird Mobil - Geolocation und Location Based Services
Page 33: Das Web Wird Mobil - Geolocation und Location Based Services

menschen wollen lieber adressen.

Page 38: Das Web Wird Mobil - Geolocation und Location Based Services

genug javascript, jetzt kommt der elefant.

Page 39: Das Web Wird Mobil - Geolocation und Location Based Services

public function geocodeReverse($lat, $lon) { $url = sprintf('http://maps.google.com/maps/api/' . 'geocode/json?latlng=%s,%s&sensor=false', $lat, $lon); $json = file_get_contents($url); $response = json_decode($json);

if ($response->status === 'OK') { return $response->results; } else { throw new Exception($response->status); } }

Page 40: Das Web Wird Mobil - Geolocation und Location Based Services

"results" : [ { "address_components" : [...], "formatted_address" : "Mittelstraße 23, 10117 Berlin, Germany", "geometry" : { "location" : { "lat" : 52.51820, "lng" : 13.387170 }, "location_type" : "ROOFTOP", "viewport" : { "northeast" : {...}, "southwest" : {...} } }, "types" : [ "street_address" ] }, { "address_components" : [ ... ], "formatted_address" : "10117 Berlin, Germany", "geometry" : { "bounds" : {...} }, "location" : {...}, "location_type" : "APPROXIMATE", "viewport" : {...}, "types" : [ "postal_code" ] }, ...]

Page 41: Das Web Wird Mobil - Geolocation und Location Based Services

try { $geocoder = new Geocoder(); $results = $geocoder->geocodeReverse($lat, $lon);

echo "<ul>"; foreach ($results as $result) { printf("<li>%s (%s)</li>", $result->formatted_address, implode(', ', $result->types)); } echo "</ul>";} catch (Exception $e) { echo "Geocodierung ist fehlgeschlagen: " . $e->getMessage();}

Page 42: Das Web Wird Mobil - Geolocation und Location Based Services

•Mittelstraße 23, 10117 Berlin, Germany (street_address)

•10117 Berlin, Germany (postal_code)

•Mitte, Berlin, Germany (sublocality, political)

•Berlin, Germany (locality, political)

•Berlin, Germany (administrative_area_level_1, political)

•Germany (country, political)

Page 43: Das Web Wird Mobil - Geolocation und Location Based Services

Laut Google:

Mittelstraße 2310117 BerlinGermany

Laut Hotel:

Friedrichstraße 15110117 BerlinGermany

Page 44: Das Web Wird Mobil - Geolocation und Location Based Services
Page 45: Das Web Wird Mobil - Geolocation und Location Based Services

schritt zwei:wo sind die cupcakes?

Page 46: Das Web Wird Mobil - Geolocation und Location Based Services
Page 47: Das Web Wird Mobil - Geolocation und Location Based Services
Page 52: Das Web Wird Mobil - Geolocation und Location Based Services

locationradiussensor

keywordnametypes

rankbylanguage

Page 53: Das Web Wird Mobil - Geolocation und Location Based Services

https://maps.googleapis.com/maps/api/place/search/json?location=52.5185,13.3885&types=food&radius=25000&key=...&sensor=false&name=cupcake

Page 54: Das Web Wird Mobil - Geolocation und Location Based Services

{ "html_attributions" : [ "Listings by ...." ], "results" : [ { "geometry" : { "location" : { "lat" : 52.5107460, "lng" : 13.4577320 } }, "icon" : "http://maps.gstatic.com/ma...s/restaurant-71.png", "id" : "b9a03f408df6ade6021a150d3bf5ae04f24853db", "name" : "Cupcake", "rating" : 4.10, "reference" : "CnRl...R7TAHjPh_H2Mw", "types" : [ "store", "cafe", "restaurant", "food"], "vicinity" : "Krossener Straße 12, Berlin" }, ....], "status" : "OK"}

Page 55: Das Web Wird Mobil - Geolocation und Location Based Services

$config = parse_ini_file('google-places.ini');

$long = $_GET['long'];$lat = $_GET['lat'];

$searchUrl = sprintf("https://maps.....search/json". "?location=%s,%s&types=food&radius=25000&“. "key=%s&sensor=false", $lat, $long, $config['googlekey']);

if (isset($_GET['search'])) { $searchUrl = $searchUrl . "&name=" . $_GET['search'];}

$jsonResponse = file_get_contents($searchUrl);$response = json_decode($jsonResponse);

Page 56: Das Web Wird Mobil - Geolocation und Location Based Services

if ($response->status !== 'OK') { printf('<p>Es ist ein Fehler aufgetreten: %s</p>', $response->status);} else { print '<ul style="float: left; margin-right: 25px;">'; foreach ($response->results as $entry) { $rating = isset($entry->rating) ? $entry->rating : 0; print '<li>'; printf('<a href="google-detail.php?reference=%s">%s</a>'. '<div class="rating_bar" title="Bewertung: %s"> '. '<div style="width:%d%%"></div></div>', $entry->reference, $entry->name, $rating, $rating/5*100); print '</li>'; } print '</ul>';}

Page 57: Das Web Wird Mobil - Geolocation und Location Based Services
Page 58: Das Web Wird Mobil - Geolocation und Location Based Services

schritt zwei ½:wie weit ist es noch?

Page 59: Das Web Wird Mobil - Geolocation und Location Based Services

ba c

Page 60: Das Web Wird Mobil - Geolocation und Location Based Services

die erde ist eine kugel*.

* eigentlich ein ellipsoid.

Page 61: Das Web Wird Mobil - Geolocation und Location Based Services

dist = 6378.388 * acos( sin(lat1) * sin(lat2) + cos(lat1) * cos(lat2) * cos(lon2 - lon1))

http://www.kompf.de/gps/distcalc.html

Page 62: Das Web Wird Mobil - Geolocation und Location Based Services

function calcDistance($lat1, $lon1, $lat2, $lon2) { $lat1 = deg2rad($lat1); $lon1 = deg2rad($lon1); $lat2 = deg2rad($lat2); $lon2 = deg2rad($lon2); return 6378.388 * acos(sin($lat1) * sin($lat2) + cos($lat1) * cos($lat2) * cos($lon2 - $lon1));}

Page 63: Das Web Wird Mobil - Geolocation und Location Based Services
Page 64: Das Web Wird Mobil - Geolocation und Location Based Services

geht das auch ohne google?

Page 65: Das Web Wird Mobil - Geolocation und Location Based Services
Page 66: Das Web Wird Mobil - Geolocation und Location Based Services
Page 67: Das Web Wird Mobil - Geolocation und Location Based Services
Page 68: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

Page 69: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

sicherheit

Page 70: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

versionierung

Page 71: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

position

Page 72: Das Web Wird Mobil - Geolocation und Location Based Services

$config = parse_ini_file('config/foursquare-config.ini');$searchUrl = sprintf('https://....../venues/search?'. 'intent=browse&ll=%s,%s&radius=10000&limit=15'. '&query=Cupcake&client_id=%s&client_secret=%s'. '&v=20111113', $lat, $long, $config['clientId'], $config['clientSecret']);

$jsonResponse = file_get_contents($searchUrl);$response = json_decode($jsonResponse);

foreach ($response->response->venues as $venue) { printf("<li>%s (%0.2f km)</li>", $venue->name, $venue->location->distance/1000);}

Page 73: Das Web Wird Mobil - Geolocation und Location Based Services
Page 74: Das Web Wird Mobil - Geolocation und Location Based Services

"categories": [ { "id" : "4bf58dd8d48988d1bc941735", "name" : "Cupcake Shop", "pluralName" : "Cupcake Shops", "shortName" : "Cupcakes", "icon" : { "prefix" : "https://.../categories/food/cupcakes_", "sizes" : [32,44,64,88,256], "name" : ".png" }, "primary" : true } ]

Page 75: Das Web Wird Mobil - Geolocation und Location Based Services

personalisierte empfehlungen

Page 76: Das Web Wird Mobil - Geolocation und Location Based Services
Page 77: Das Web Wird Mobil - Geolocation und Location Based Services

wie unterstützt das mein business?

Page 78: Das Web Wird Mobil - Geolocation und Location Based Services
Page 79: Das Web Wird Mobil - Geolocation und Location Based Services
Page 80: Das Web Wird Mobil - Geolocation und Location Based Services

Beware of the Dark Side, Luke.

Page 81: Das Web Wird Mobil - Geolocation und Location Based Services

http://www.cultofmac.com/157641/this-creepy-app-isnt-just-stalking-women-without-their-knowledge-its-a-wake-up-call-about-facebook-privacy/

Page 82: Das Web Wird Mobil - Geolocation und Location Based Services
Page 83: Das Web Wird Mobil - Geolocation und Location Based Services

vielen dank.

Stephan SchmidtHead of Web Sales Development1&1 Internet AG

[email protected]/schst