google maps api - devfest karlsruhe

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