google maps api - devfest karlsruhe
DESCRIPTION
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.TRANSCRIPT
Martin Kleppe / Ubilabs
Google Maps API
@aemkeiMartin Kleppe |
Maps API
> 150 Features> 150 Features
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition 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
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition 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
Location
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);
var geocoder = new google.maps.Geocoder();
geocoder.geocode(options, function(results, status) { map.setCenter( results[0].geometry.location );});
var options = { address: "Erzbergerstraße 121, Karlsruhe" };
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() { ... }
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(); ... });
Custom Icons
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});
Directions
var service = new google.maps.DirectionsService();
var request = { origin: from, destination: to, travelMode: google.maps.TravelMode.DRIVING};
service.route(request, function(response, status) { ...});
"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.getElevationAlongPath( options, plotElevation);
function plotElevation(results) { ...});
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 Standard Time"}
StreetView
var options = { position: location, pov: { heading: 165, pitch: 0, zoom: 1 }};
new google.maps.StreetViewPanorama( document.getElementById('pano'), options);
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.addListener( searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); ... });
Locale
https://maps.googleapis.com/maps/api/js? sensor=false& language=ja
Styled Maps
var styles = [ { featureType: 'road', elementType: 'geometry', stylers: [ { hue: -45 }, { saturation: 100 } ] }];
var mapOptions = { ... styles: styles};
Natural Geography
Weather
var units = google.maps.weather.TemperatureUnit.FAHRENHEIT;
new google.maps.weather.CloudLayer({ map: map});
new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map});
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 google.maps.LatLng(37.782842, -122.443688), ...];
new google.maps.visualization.HeatmapLayer({ data: data});
Canvas Layer
github.com/ubilabs
Q&A
Martin Kleppe / Ubilabs
Google Maps API