Google Maps APIMartin Kleppe / Ubilabs
Martin Kleppe | @aemkei
Maps API
> 150 Features
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage M...
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage M...
Location
var location = new google.maps.LatLng(   49.026564,   8.385753);var options = {   zoom: 12,   center: location,   mapTypeI...
var geocoder = new google.maps.Geocoder();var options = {   address: "Erzbergerstraße 121, Karlsruhe"};geocoder.geocode(op...
navigator.geolocation.getCurrentPosition(success, error);function success(position) {  var location = new google.maps.LatL...
var input = document.getElementById(input);var autocomplete = new google.maps.places.Autocomplete(input);autocomplete.bind...
Custom Icons
var image = new google.maps.MarkerImage(   image.png,   new google.maps.Size(20, 20),   new google.maps.Point(0, 0),   new...
Directions
var service = new google.maps.DirectionsService();var request = {   origin: from,   destination: to,   travelMode: google....
"duration" : {   "text" : "35 mins",   "value" : 2093},"duration_in_traffic" : {  "text" : "46 mins",  "value" : 2767}
Elevation
var service = new google.maps.ElevationService();var options = {   path: latLngs,   samples: 256};service.getElevationAlon...
Time Zones
https://maps.googleapis.com/maps/api/timezone/json?  location=49.026564,8.385753&  timestamp=135189720&  sensor=false
{    dstOffset: 0,    rawOffset: 3600,    status: "OK",    timeZoneId: "Europe/Berlin",    timeZoneName: "Central European...
StreetView
var options = {   position: location,   pov: {     heading: 165,     pitch: 0,     zoom: 1   }};new google.maps.StreetView...
45°
map.setTilt(45);map.setHeading(90);
Places
https://maps.googleapis.com/maps/api/js?  sensor=false&  libraries=places
var input = document.getElementById(input);var searchBox = new google.maps.places.SearchBox(input);google.maps.event.addLi...
Locale
https://maps.googleapis.com/maps/api/js?  sensor=false&  language=ja
Styled Maps
var styles = [   {     featureType: road,     elementType: geometry,     stylers: [       { hue: -45 },       { saturation...
Natural Geography
Weather
var units = google.maps.weather.TemperatureUnit.FAHRENHEIT;new google.maps.weather.WeatherLayer({  temperatureUnits: units...
BIG DATA
Clusterer
http://google-maps-utility-library-v3.googlecode.com
Fusion Tables
Heat Maps
var data = [   new google.maps.LatLng(37.782551, -122.445368),   new google.maps.LatLng(37.782745, -122.444586),   new goo...
Canvas Layer
github.com/ubilabs
Q&A
Google Maps APIMartin Kleppe / Ubilabs
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Prochain SlideShare
Chargement dans…5
×

Google Maps API - DevFest Karlsruhe

14 606 vues

Publié le

The Google Maps API lets you embed Google Maps in your own web pages
in just a few simple steps. Since the launch in 2005 Google is adding
tons of features to the API and constantly pushes the limits with the
use of modern browsers. It is one of the most used JavaScript
libraries and implemented by more than 350,000 websites.

This talk gives you an overview of the latest API additions – such as
the Canvas layer, the Places API and real time traffic conditions –
and showcase stunning web applications build on top of these
libraries. Martin shares his experience on how to programmatically and
visually handle large amounts of custom data.

0 commentaire
18 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
14 606
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 578
Actions
Partages
0
Téléchargements
215
Commentaires
0
J’aime
18
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Google Maps API - DevFest Karlsruhe

  1. Google Maps APIMartin Kleppe / Ubilabs
  2. Martin Kleppe | @aemkei
  3. Maps API
  4. > 150 Features
  5. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
  6. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
  7. Location
  8. var location = new google.maps.LatLng( 49.026564, 8.385753);var options = { zoom: 12, center: location, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map( document.getElementById(map_canvas), options);
  9. var geocoder = new google.maps.Geocoder();var options = { address: "Erzbergerstraße 121, Karlsruhe"};geocoder.geocode(options, function(results, status) { map.setCenter( results[0].geometry.location );});
  10. navigator.geolocation.getCurrentPosition(success, error);function success(position) { var location = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ); map.setCenter(location);}function error() { ... }
  11. var input = document.getElementById(input);var autocomplete = new google.maps.places.Autocomplete(input);autocomplete.bindTo(bounds, map);google.maps.event.addListener( autocomplete, place_changed, function() { var place = autocomplete.getPlace(); ... });
  12. Custom Icons
  13. var image = new google.maps.MarkerImage( image.png, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(10, 20));var shadow = ...;var shape = { coord: [5,5, 5,15, 15,15, 15,5], type: poly};var marker = new google.maps.Marker({ ... icon: image, shadow: shadow, shape: shape});
  14. Directions
  15. var service = new google.maps.DirectionsService();var request = { origin: from, destination: to, travelMode: google.maps.TravelMode.DRIVING};service.route(request, function(response, status) { ...});
  16. "duration" : { "text" : "35 mins", "value" : 2093},"duration_in_traffic" : { "text" : "46 mins", "value" : 2767}
  17. Elevation
  18. var service = new google.maps.ElevationService();var options = { path: latLngs, samples: 256};service.getElevationAlongPath( options, plotElevation);function plotElevation(results) { ...});
  19. Time Zones
  20. https://maps.googleapis.com/maps/api/timezone/json? location=49.026564,8.385753& timestamp=135189720& sensor=false
  21. { dstOffset: 0, rawOffset: 3600, status: "OK", timeZoneId: "Europe/Berlin", timeZoneName: "Central European Standard Time"}
  22. StreetView
  23. var options = { position: location, pov: { heading: 165, pitch: 0, zoom: 1 }};new google.maps.StreetViewPanorama( document.getElementById(pano), options);
  24. 45°
  25. map.setTilt(45);map.setHeading(90);
  26. Places
  27. https://maps.googleapis.com/maps/api/js? sensor=false& libraries=places
  28. var input = document.getElementById(input);var searchBox = new google.maps.places.SearchBox(input);google.maps.event.addListener( searchBox, places_changed, function() { var places = searchBox.getPlaces(); ... });
  29. Locale
  30. https://maps.googleapis.com/maps/api/js? sensor=false& language=ja
  31. Styled Maps
  32. var styles = [ { featureType: road, elementType: geometry, stylers: [ { hue: -45 }, { saturation: 100 } ] }];var mapOptions = { ... styles: styles};
  33. Natural Geography
  34. Weather
  35. var units = google.maps.weather.TemperatureUnit.FAHRENHEIT;new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map});new google.maps.weather.CloudLayer({ map: map});
  36. BIG DATA
  37. Clusterer
  38. http://google-maps-utility-library-v3.googlecode.com
  39. Fusion Tables
  40. Heat Maps
  41. var data = [ new google.maps.LatLng(37.782551, -122.445368), new google.maps.LatLng(37.782745, -122.444586), new google.maps.LatLng(37.782842, -122.443688), ...];new google.maps.visualization.HeatmapLayer({ data: data});
  42. Canvas Layer
  43. github.com/ubilabs
  44. Q&A
  45. Google Maps APIMartin Kleppe / Ubilabs

×