Your SlideShare is downloading. ×
0
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
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
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google Maps API - DevFest Karlsruhe

7,378

Published on

The Google Maps API lets you embed Google Maps in your own web pages …

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 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,378
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
189
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×