Successfully reported this slideshow.
Your SlideShare is downloading. ×

Google Maps API - DevFest Karlsruhe

Google Maps API - DevFest Karlsruhe

Download to read offline

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.

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.

More Related Content

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Google Maps API - DevFest Karlsruhe

  1. Google Maps API Martin Kleppe / Ubilabs
  2. Martin Kleppe | @aemkei
  3. Maps API
  4. > 150 Features
  5. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
  6. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC onditions 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 API Martin Kleppe / Ubilabs

×