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
![Page 1: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/1.jpg)
Martin Kleppe / Ubilabs
Google Maps API
![Page 2: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/2.jpg)
@aemkeiMartin Kleppe |
![Page 3: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/3.jpg)
![Page 4: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/4.jpg)
![Page 5: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/5.jpg)
![Page 6: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/6.jpg)
![Page 7: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/7.jpg)
![Page 8: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/8.jpg)
![Page 9: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/9.jpg)
Maps API
![Page 10: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/10.jpg)
> 150 Features> 150 Features
![Page 11: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/11.jpg)
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
![Page 12: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/12.jpg)
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
![Page 13: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/13.jpg)
Location
![Page 14: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/14.jpg)
![Page 15: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/15.jpg)
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);
![Page 16: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/16.jpg)
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" };
![Page 17: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/17.jpg)
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() { ... }
![Page 18: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/18.jpg)
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(); ... });
![Page 19: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/19.jpg)
![Page 20: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/20.jpg)
Custom Icons
![Page 21: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/21.jpg)
![Page 22: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/22.jpg)
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});
![Page 23: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/23.jpg)
Directions
![Page 24: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/24.jpg)
var service = new google.maps.DirectionsService();
var request = { origin: from, destination: to, travelMode: google.maps.TravelMode.DRIVING};
service.route(request, function(response, status) { ...});
![Page 25: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/25.jpg)
![Page 26: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/26.jpg)
![Page 27: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/27.jpg)
![Page 28: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/28.jpg)
"duration" : { "text" : "35 mins", "value" : 2093},
"duration_in_traffic" : { "text" : "46 mins", "value" : 2767}
![Page 29: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/29.jpg)
Elevation
![Page 30: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/30.jpg)
![Page 31: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/31.jpg)
![Page 32: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/32.jpg)
var service = new google.maps.ElevationService();
var options = { path: latLngs, samples: 256};
service.getElevationAlongPath( options, plotElevation);
function plotElevation(results) { ...});
![Page 33: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/33.jpg)
Time Zones
![Page 34: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/34.jpg)
![Page 35: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/35.jpg)
https://maps.googleapis.com/maps/api/timezone/json?
location=49.026564,8.385753& timestamp=135189720& sensor=false
![Page 36: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/36.jpg)
{ dstOffset: 0, rawOffset: 3600, status: "OK", timeZoneId: "Europe/Berlin", timeZoneName: "Central European Standard Time"}
![Page 37: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/37.jpg)
StreetView
![Page 38: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/38.jpg)
![Page 39: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/39.jpg)
var options = { position: location, pov: { heading: 165, pitch: 0, zoom: 1 }};
new google.maps.StreetViewPanorama( document.getElementById('pano'), options);
![Page 40: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/40.jpg)
45°
![Page 41: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/41.jpg)
![Page 42: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/42.jpg)
![Page 43: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/43.jpg)
map.setTilt(45);map.setHeading(90);
![Page 44: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/44.jpg)
Places
![Page 45: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/45.jpg)
![Page 46: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/46.jpg)
https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places
![Page 47: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/47.jpg)
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(); ... });
![Page 48: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/48.jpg)
![Page 49: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/49.jpg)
Locale
![Page 50: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/50.jpg)
![Page 51: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/51.jpg)
![Page 52: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/52.jpg)
https://maps.googleapis.com/maps/api/js? sensor=false& language=ja
![Page 53: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/53.jpg)
Styled Maps
![Page 54: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/54.jpg)
![Page 55: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/55.jpg)
![Page 56: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/56.jpg)
![Page 57: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/57.jpg)
![Page 58: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/58.jpg)
![Page 59: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/59.jpg)
var styles = [ { featureType: 'road', elementType: 'geometry', stylers: [ { hue: -45 }, { saturation: 100 } ] }];
var mapOptions = { ... styles: styles};
![Page 60: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/60.jpg)
![Page 61: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/61.jpg)
![Page 62: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/62.jpg)
Natural Geography
![Page 63: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/63.jpg)
![Page 64: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/64.jpg)
![Page 65: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/65.jpg)
Weather
![Page 66: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/66.jpg)
![Page 67: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/67.jpg)
var units = google.maps.weather.TemperatureUnit.FAHRENHEIT;
new google.maps.weather.CloudLayer({ map: map});
new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map});
![Page 68: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/68.jpg)
BIG DATA
![Page 69: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/69.jpg)
Clusterer
![Page 70: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/70.jpg)
![Page 71: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/71.jpg)
http://google-maps-utility-library-v3.googlecode.com
![Page 72: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/72.jpg)
Fusion Tables
![Page 73: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/73.jpg)
![Page 74: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/74.jpg)
![Page 75: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/75.jpg)
Heat Maps
![Page 76: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/76.jpg)
![Page 77: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/77.jpg)
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});
![Page 78: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/78.jpg)
![Page 79: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/79.jpg)
Canvas Layer
![Page 80: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/80.jpg)
![Page 81: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/81.jpg)
github.com/ubilabs
![Page 82: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/82.jpg)
![Page 83: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/83.jpg)
![Page 84: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/84.jpg)
![Page 85: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/85.jpg)
Q&A
![Page 86: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/86.jpg)
![Page 87: Google Maps API - DevFest Karlsruhe](https://reader031.vdocuments.net/reader031/viewer/2022013114/554be4a3b4c9056b348b48fd/html5/thumbnails/87.jpg)
Martin Kleppe / Ubilabs
Google Maps API