SlideShare a Scribd company logo
Google Maps API
Martin Kleppe / Ubilabs
Martin Kleppe | @aemkei
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
Maps API
> 150 Features
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
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
Location
Google Maps API - DevFest Karlsruhe
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();

var options = {
   address: "Erzbergerstraße 121, Karlsruhe"
};

geocoder.geocode(options, function(results, status) {
  map.setCenter(
     results[0].geometry.location
  );
});
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();
     ...
   }
);
Google Maps API - DevFest Karlsruhe
Custom Icons
Google Maps API - DevFest Karlsruhe
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) {
  ...
});
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
"duration" : {
   "text" : "35 mins",
   "value" : 2093
},

"duration_in_traffic" : {
  "text" : "46 mins",
  "value" : 2767
}
Elevation
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
var service = new google.maps.ElevationService();

var options = {
   path: latLngs,
   samples: 256
};

service.getElevationAlongPath(
   options,
   plotElevation
);

function plotElevation(results) {
  ...
});
Time Zones
Google Maps API - DevFest Karlsruhe
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
Google Maps API - DevFest Karlsruhe
var options = {
   position: location,
   pov: {
     heading: 165,
     pitch: 0,
     zoom: 1
   }
};

new google.maps.StreetViewPanorama(
   document.getElementById('pano'),
   options
);
45°
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
map.setTilt(45);
map.setHeading(90);
Places
Google Maps API - DevFest Karlsruhe
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();
     ...
   }
);
Google Maps API - DevFest Karlsruhe
Locale
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
https://maps.googleapis.com/maps/api/js?
  sensor=false&
  language=ja
Styled Maps
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
var styles = [
   {
     featureType: 'road',
     elementType: 'geometry',
     stylers: [
       { hue: -45 },
       { saturation: 100 }
     ]
   }
];

var mapOptions = {
   ...
   styles: styles
};
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Natural Geography
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Weather
Google Maps API - DevFest Karlsruhe
var units = google.maps.weather.TemperatureUnit.FAHRENHEIT;

new google.maps.weather.WeatherLayer({
  temperatureUnits: units,
  map: map
});

new google.maps.weather.CloudLayer({
  map: map
});
BIG DATA
Clusterer
Google Maps API - DevFest Karlsruhe
http://
google-maps-utility-library-v3.
googlecode.com
Fusion Tables
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Heat Maps
Google Maps API - DevFest Karlsruhe
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
});
Google Maps API - DevFest Karlsruhe
Canvas Layer
Google Maps API - DevFest Karlsruhe
github.com/ubilabs
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Q&A
Google Maps API - DevFest Karlsruhe
Google Maps API
Martin Kleppe / Ubilabs

More Related Content

What's hot

Google earth
Google earthGoogle earth
Google earth
PRESENTATIONSFORESL
 
REST-API introduction for developers
REST-API introduction for developersREST-API introduction for developers
REST-API introduction for developers
Patrick Savalle
 
Node.js
Node.jsNode.js
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
David Barreto
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Malla Reddy University
 
Angular
AngularAngular
REST APIs for the Internet of Things
REST APIs for the Internet of ThingsREST APIs for the Internet of Things
REST APIs for the Internet of Things
Michael Koster
 
Angular 8
Angular 8 Angular 8
Angular 8
Sunil OS
 
Application of GIS in Mine Contamination and Associated Environmental Impacts
Application of GIS in Mine Contamination and Associated Environmental ImpactsApplication of GIS in Mine Contamination and Associated Environmental Impacts
Application of GIS in Mine Contamination and Associated Environmental Impacts
Arsalan Syed, PMP
 
Rest and the hypermedia constraint
Rest and the hypermedia constraintRest and the hypermedia constraint
Rest and the hypermedia constraint
Inviqa
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
WebStackAcademy
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Duy Khanh
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
Reema
 
Google Earth
Google EarthGoogle Earth
Google Earth
bananagrl6913
 
Map design in GIS
Map design in GISMap design in GIS
Map design in GIS
Hans van der Kwast
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
Patrick Schroeder
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Dom
DomDom

What's hot (20)

Google earth
Google earthGoogle earth
Google earth
 
REST-API introduction for developers
REST-API introduction for developersREST-API introduction for developers
REST-API introduction for developers
 
Node.js
Node.jsNode.js
Node.js
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
Angular
AngularAngular
Angular
 
REST APIs for the Internet of Things
REST APIs for the Internet of ThingsREST APIs for the Internet of Things
REST APIs for the Internet of Things
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Application of GIS in Mine Contamination and Associated Environmental Impacts
Application of GIS in Mine Contamination and Associated Environmental ImpactsApplication of GIS in Mine Contamination and Associated Environmental Impacts
Application of GIS in Mine Contamination and Associated Environmental Impacts
 
Rest and the hypermedia constraint
Rest and the hypermedia constraintRest and the hypermedia constraint
Rest and the hypermedia constraint
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
Google Earth
Google EarthGoogle Earth
Google Earth
 
Map design in GIS
Map design in GISMap design in GIS
Map design in GIS
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Dom
DomDom
Dom
 

Viewers also liked

Google maps
Google mapsGoogle maps
Google maps
TeiaMinasGerais
 
Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)
Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)
Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)
j g
 
Virtual Worlds: Social Networking, Social Learning and Pedagogy
Virtual Worlds: Social Networking, Social Learning and PedagogyVirtual Worlds: Social Networking, Social Learning and Pedagogy
Virtual Worlds: Social Networking, Social Learning and Pedagogy
Ramesh C. Sharma
 
Niche Presentation
Niche PresentationNiche Presentation
Niche Presentation
IrinaRybak
 
Magazine Inspiration PPT
Magazine Inspiration PPTMagazine Inspiration PPT
Magazine Inspiration PPT
John Prescott
 
Francisco escobar redes sociales
Francisco escobar redes socialesFrancisco escobar redes sociales
Francisco escobar redes sociales
Franko Escobar
 
ReviewAnalyst presentation
ReviewAnalyst presentationReviewAnalyst presentation
ReviewAnalyst presentation
Dean Schmit
 
Referencias cuarto semestre mas derecho
Referencias cuarto semestre mas derechoReferencias cuarto semestre mas derecho
Referencias cuarto semestre mas derecho
Facultad Derecho Unam
 
PDF de la Enciclopedia de la Discriminación
PDF de la Enciclopedia de la DiscriminaciónPDF de la Enciclopedia de la Discriminación
PDF de la Enciclopedia de la Discriminación
Genera Acciones
 
SANTO CRISTO DE URDA (TOLEDO) SPAIN
SANTO CRISTO DE URDA (TOLEDO)  SPAINSANTO CRISTO DE URDA (TOLEDO)  SPAIN
SANTO CRISTO DE URDA (TOLEDO) SPAIN
CARLOS UBEDA
 
Ubilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesUbilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best Practices
Martin Kleppe
 
La casa vanna
La casa vannaLa casa vanna
La casa vanna
Johan Morales Cruz
 
Google Maps
Google MapsGoogle Maps
Google Maps
gp3project
 
Beyond Google Maps - FOWA 2008 London
Beyond Google Maps - FOWA 2008 LondonBeyond Google Maps - FOWA 2008 London
Beyond Google Maps - FOWA 2008 London
Andrew Turner
 
Hadoop Summit Europe 2014: Apache Storm Architecture
Hadoop Summit Europe 2014: Apache Storm ArchitectureHadoop Summit Europe 2014: Apache Storm Architecture
Hadoop Summit Europe 2014: Apache Storm Architecture
P. Taylor Goetz
 
Iaap 20_práctica - 2017 cómo crear un mapa en google maps
 Iaap 20_práctica - 2017 cómo crear un mapa en google maps Iaap 20_práctica - 2017 cómo crear un mapa en google maps
Iaap 20_práctica - 2017 cómo crear un mapa en google maps
Alberto Aranda
 
Mapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APIMapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript API
NAILBITER
 
MapUp - Google Maps
MapUp - Google MapsMapUp - Google Maps
MapUp - Google Maps
Meryem Bendella
 
MapUp Tlemcen - Google Maps API
MapUp Tlemcen - Google Maps APIMapUp Tlemcen - Google Maps API
MapUp Tlemcen - Google Maps API
Meryem Bendella
 

Viewers also liked (20)

Google maps
Google mapsGoogle maps
Google maps
 
Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)
Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)
Coleccionable 1. la procuraduría y la participación ciudadana (mayo de 2015)
 
Virtual Worlds: Social Networking, Social Learning and Pedagogy
Virtual Worlds: Social Networking, Social Learning and PedagogyVirtual Worlds: Social Networking, Social Learning and Pedagogy
Virtual Worlds: Social Networking, Social Learning and Pedagogy
 
Niche Presentation
Niche PresentationNiche Presentation
Niche Presentation
 
Magazine Inspiration PPT
Magazine Inspiration PPTMagazine Inspiration PPT
Magazine Inspiration PPT
 
Francisco escobar redes sociales
Francisco escobar redes socialesFrancisco escobar redes sociales
Francisco escobar redes sociales
 
ReviewAnalyst presentation
ReviewAnalyst presentationReviewAnalyst presentation
ReviewAnalyst presentation
 
Referencias cuarto semestre mas derecho
Referencias cuarto semestre mas derechoReferencias cuarto semestre mas derecho
Referencias cuarto semestre mas derecho
 
PDF de la Enciclopedia de la Discriminación
PDF de la Enciclopedia de la DiscriminaciónPDF de la Enciclopedia de la Discriminación
PDF de la Enciclopedia de la Discriminación
 
SANTO CRISTO DE URDA (TOLEDO) SPAIN
SANTO CRISTO DE URDA (TOLEDO)  SPAINSANTO CRISTO DE URDA (TOLEDO)  SPAIN
SANTO CRISTO DE URDA (TOLEDO) SPAIN
 
Ubilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesUbilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best Practices
 
La casa vanna
La casa vannaLa casa vanna
La casa vanna
 
Google Maps
Google MapsGoogle Maps
Google Maps
 
Beyond Google Maps - FOWA 2008 London
Beyond Google Maps - FOWA 2008 LondonBeyond Google Maps - FOWA 2008 London
Beyond Google Maps - FOWA 2008 London
 
Hadoop Summit Europe 2014: Apache Storm Architecture
Hadoop Summit Europe 2014: Apache Storm ArchitectureHadoop Summit Europe 2014: Apache Storm Architecture
Hadoop Summit Europe 2014: Apache Storm Architecture
 
PES
PESPES
PES
 
Iaap 20_práctica - 2017 cómo crear un mapa en google maps
 Iaap 20_práctica - 2017 cómo crear un mapa en google maps Iaap 20_práctica - 2017 cómo crear un mapa en google maps
Iaap 20_práctica - 2017 cómo crear un mapa en google maps
 
Mapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APIMapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript API
 
MapUp - Google Maps
MapUp - Google MapsMapUp - Google Maps
MapUp - Google Maps
 
MapUp Tlemcen - Google Maps API
MapUp Tlemcen - Google Maps APIMapUp Tlemcen - Google Maps API
MapUp Tlemcen - Google Maps API
 

Similar to Google Maps API - DevFest Karlsruhe

Visualization Using the Google Maps API
Visualization Using the Google Maps APIVisualization Using the Google Maps API
Visualization Using the Google Maps API
Martin Kleppe
 
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the BrowserWhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
Martin Kleppe
 
Geolocation and Mapping
Geolocation and MappingGeolocation and Mapping
Geolocation and Mapping
Ivano Malavolta
 
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with FlashAdobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Ossama Alami
 
Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based Services
Stephan Schmidt
 
How data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesHow data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield Heroes
Electronic Arts / DICE
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
CoLab Athens
 
Creating an Uber Clone - Part XXX - Transcript.pdf
Creating an Uber Clone - Part XXX - Transcript.pdfCreating an Uber Clone - Part XXX - Transcript.pdf
Creating an Uber Clone - Part XXX - Transcript.pdf
ShaiAlmog1
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers.
Avni Khatri
 
Mobile geolocation and mapping
Mobile geolocation and mappingMobile geolocation and mapping
Mobile geolocation and mapping
Ivano Malavolta
 
Map technologies
Map technologiesMap technologies
Map technologies
joergreichert
 
Creating an Uber Clone - Part XXX.pdf
Creating an Uber Clone - Part XXX.pdfCreating an Uber Clone - Part XXX.pdf
Creating an Uber Clone - Part XXX.pdf
ShaiAlmog1
 
What are customers building with new Bing Maps capabilities
What are customers building with new Bing Maps capabilitiesWhat are customers building with new Bing Maps capabilities
What are customers building with new Bing Maps capabilities
Microsoft Tech Community
 
[2015/2016] Geolocation and mapping
[2015/2016] Geolocation and mapping[2015/2016] Geolocation and mapping
[2015/2016] Geolocation and mapping
Ivano Malavolta
 
Developing Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual EarthDeveloping Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual Earth
goodfriday
 
Geolocation and mapping using Google Maps services
Geolocation and mapping using Google Maps servicesGeolocation and mapping using Google Maps services
Geolocation and mapping using Google Maps services
Ivano Malavolta
 
Barcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kóduBarcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kódu
Milos Lenoch
 
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to heroBuilding a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Allan Laframboise
 
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
OReillyWhere20
 
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with NodeHow to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
pdeschen
 

Similar to Google Maps API - DevFest Karlsruhe (20)

Visualization Using the Google Maps API
Visualization Using the Google Maps APIVisualization Using the Google Maps API
Visualization Using the Google Maps API
 
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the BrowserWhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
 
Geolocation and Mapping
Geolocation and MappingGeolocation and Mapping
Geolocation and Mapping
 
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with FlashAdobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
 
Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based Services
 
How data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesHow data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield Heroes
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
 
Creating an Uber Clone - Part XXX - Transcript.pdf
Creating an Uber Clone - Part XXX - Transcript.pdfCreating an Uber Clone - Part XXX - Transcript.pdf
Creating an Uber Clone - Part XXX - Transcript.pdf
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers.
 
Mobile geolocation and mapping
Mobile geolocation and mappingMobile geolocation and mapping
Mobile geolocation and mapping
 
Map technologies
Map technologiesMap technologies
Map technologies
 
Creating an Uber Clone - Part XXX.pdf
Creating an Uber Clone - Part XXX.pdfCreating an Uber Clone - Part XXX.pdf
Creating an Uber Clone - Part XXX.pdf
 
What are customers building with new Bing Maps capabilities
What are customers building with new Bing Maps capabilitiesWhat are customers building with new Bing Maps capabilities
What are customers building with new Bing Maps capabilities
 
[2015/2016] Geolocation and mapping
[2015/2016] Geolocation and mapping[2015/2016] Geolocation and mapping
[2015/2016] Geolocation and mapping
 
Developing Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual EarthDeveloping Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual Earth
 
Geolocation and mapping using Google Maps services
Geolocation and mapping using Google Maps servicesGeolocation and mapping using Google Maps services
Geolocation and mapping using Google Maps services
 
Barcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kóduBarcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kódu
 
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to heroBuilding a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
 
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
 
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with NodeHow to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
 

Google Maps API - DevFest Karlsruhe

  • 1. Google Maps API Martin Kleppe / Ubilabs
  • 2. Martin Kleppe | @aemkei
  • 11. 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
  • 12. 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
  • 15. 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 );
  • 16. 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 ); });
  • 17. 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() { ... }
  • 18. 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(); ... } );
  • 22. 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 });
  • 24. var service = new google.maps.DirectionsService(); var request = { origin: from, destination: to, travelMode: google.maps.TravelMode.DRIVING }; service.route(request, function(response, status) { ... });
  • 28. "duration" : { "text" : "35 mins", "value" : 2093 }, "duration_in_traffic" : { "text" : "46 mins", "value" : 2767 }
  • 32. var service = new google.maps.ElevationService(); var options = { path: latLngs, samples: 256 }; service.getElevationAlongPath( options, plotElevation ); function plotElevation(results) { ... });
  • 36. { dstOffset: 0, rawOffset: 3600, status: "OK", timeZoneId: "Europe/Berlin", timeZoneName: "Central European Standard Time" }
  • 39. var options = { position: location, pov: { heading: 165, pitch: 0, zoom: 1 } }; new google.maps.StreetViewPanorama( document.getElementById('pano'), options );
  • 40. 45°
  • 47. 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(); ... } );
  • 59. var styles = [ { featureType: 'road', elementType: 'geometry', stylers: [ { hue: -45 }, { saturation: 100 } ] } ]; var mapOptions = { ... styles: styles };
  • 67. var units = google.maps.weather.TemperatureUnit.FAHRENHEIT; new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map }); new google.maps.weather.CloudLayer({ map: map });
  • 77. 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 });
  • 85. Q&A
  • 87. Google Maps API Martin Kleppe / Ubilabs