SlideShare a Scribd company logo
1 of 87
Download to read offline
Google Maps API
Martin Kleppe / Ubilabs
Martin Kleppe | @aemkei
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
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();
     ...
   }
);
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.WeatherLayer({
  temperatureUnits: units,
  map: map
});

new google.maps.weather.CloudLayer({
  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
Google Maps API
Martin Kleppe / Ubilabs

More Related Content

What's hot

12. Map | WeakMap | ES6 | JavaScript | Typescript
12. Map | WeakMap | ES6 | JavaScript | Typescript12. Map | WeakMap | ES6 | JavaScript | Typescript
12. Map | WeakMap | ES6 | JavaScript | Typescriptpcnmtutorials
 
12. Android Basic Google Map
12. Android Basic Google Map12. Android Basic Google Map
12. Android Basic Google MapOum Saokosal
 
PostGIS and Spatial SQL
PostGIS and Spatial SQLPostGIS and Spatial SQL
PostGIS and Spatial SQLTodd Barr
 
QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0Byeong-Hyeok Yu
 
오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초HaNJiN Lee
 
NDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS ProNDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS ProNorth Dakota GIS Hub
 
FME and Linear Referencing - Keeping the Product in the Pipelines
FME and Linear Referencing - Keeping the Product in the PipelinesFME and Linear Referencing - Keeping the Product in the Pipelines
FME and Linear Referencing - Keeping the Product in the PipelinesSafe Software
 
Developing Efficient Web-based GIS Applications
Developing Efficient Web-based GIS ApplicationsDeveloping Efficient Web-based GIS Applications
Developing Efficient Web-based GIS ApplicationsSwetha A
 
Quantum QIS (QGIS) Proje Menüsü
Quantum QIS (QGIS) Proje MenüsüQuantum QIS (QGIS) Proje Menüsü
Quantum QIS (QGIS) Proje MenüsüLevent Sabah
 
공간정보거점대학 1.geo server_고급과정
공간정보거점대학 1.geo server_고급과정공간정보거점대학 1.geo server_고급과정
공간정보거점대학 1.geo server_고급과정BJ Jang
 
Qgis 기초 2019
Qgis 기초 2019Qgis 기초 2019
Qgis 기초 2019Joonho Lee
 
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습HaNJiN Lee
 
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location IntelligenceNDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location IntelligenceNorth Dakota GIS Hub
 
The GRASS GIS software (with QGIS) - GIS Seminar
The GRASS GIS software (with QGIS) - GIS SeminarThe GRASS GIS software (with QGIS) - GIS Seminar
The GRASS GIS software (with QGIS) - GIS SeminarMarkus Neteler
 

What's hot (20)

Google maps
Google mapsGoogle maps
Google maps
 
12. Map | WeakMap | ES6 | JavaScript | Typescript
12. Map | WeakMap | ES6 | JavaScript | Typescript12. Map | WeakMap | ES6 | JavaScript | Typescript
12. Map | WeakMap | ES6 | JavaScript | Typescript
 
12. Android Basic Google Map
12. Android Basic Google Map12. Android Basic Google Map
12. Android Basic Google Map
 
Gdal introduction
Gdal introductionGdal introduction
Gdal introduction
 
PostGIS and Spatial SQL
PostGIS and Spatial SQLPostGIS and Spatial SQL
PostGIS and Spatial SQL
 
Google Maps
Google Maps Google Maps
Google Maps
 
QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0
 
오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초
 
NDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS ProNDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS Pro
 
FME and Linear Referencing - Keeping the Product in the Pipelines
FME and Linear Referencing - Keeping the Product in the PipelinesFME and Linear Referencing - Keeping the Product in the Pipelines
FME and Linear Referencing - Keeping the Product in the Pipelines
 
Developing Efficient Web-based GIS Applications
Developing Efficient Web-based GIS ApplicationsDeveloping Efficient Web-based GIS Applications
Developing Efficient Web-based GIS Applications
 
Quantum QIS (QGIS) Proje Menüsü
Quantum QIS (QGIS) Proje MenüsüQuantum QIS (QGIS) Proje Menüsü
Quantum QIS (QGIS) Proje Menüsü
 
공간정보거점대학 1.geo server_고급과정
공간정보거점대학 1.geo server_고급과정공간정보거점대학 1.geo server_고급과정
공간정보거점대학 1.geo server_고급과정
 
OpenLayer's basics
OpenLayer's basicsOpenLayer's basics
OpenLayer's basics
 
Qgis 기초 2019
Qgis 기초 2019Qgis 기초 2019
Qgis 기초 2019
 
Open layers
Open layersOpen layers
Open layers
 
Pyramid Framework
Pyramid FrameworkPyramid Framework
Pyramid Framework
 
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
 
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location IntelligenceNDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
 
The GRASS GIS software (with QGIS) - GIS Seminar
The GRASS GIS software (with QGIS) - GIS SeminarThe GRASS GIS software (with QGIS) - GIS Seminar
The GRASS GIS software (with QGIS) - GIS Seminar
 

Viewers also liked

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 PedagogyRamesh C. Sharma
 
Niche Presentation
Niche PresentationNiche Presentation
Niche PresentationIrinaRybak
 
Magazine Inspiration PPT
Magazine Inspiration PPTMagazine Inspiration PPT
Magazine Inspiration PPTJohn Prescott
 
Francisco escobar redes sociales
Francisco escobar redes socialesFrancisco escobar redes sociales
Francisco escobar redes socialesFranko Escobar
 
ReviewAnalyst presentation
ReviewAnalyst presentationReviewAnalyst presentation
ReviewAnalyst presentationDean Schmit
 
Referencias cuarto semestre mas derecho
Referencias cuarto semestre mas derechoReferencias cuarto semestre mas derecho
Referencias cuarto semestre mas derechoFacultad 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ónGenera Acciones
 
SANTO CRISTO DE URDA (TOLEDO) SPAIN
SANTO CRISTO DE URDA (TOLEDO)  SPAINSANTO CRISTO DE URDA (TOLEDO)  SPAIN
SANTO CRISTO DE URDA (TOLEDO) SPAINCARLOS UBEDA
 
Ubilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesUbilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesMartin Kleppe
 
Beyond Google Maps - FOWA 2008 London
Beyond Google Maps - FOWA 2008 LondonBeyond Google Maps - FOWA 2008 London
Beyond Google Maps - FOWA 2008 LondonAndrew 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 ArchitectureP. 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 mapsAlberto Aranda
 
Mapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APIMapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APINAILBITER
 
MapUp Tlemcen - Google Maps API
MapUp Tlemcen - Google Maps APIMapUp Tlemcen - Google Maps API
MapUp Tlemcen - Google Maps APIMeryem 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 Overview

Visualization Using the Google Maps API
Visualization Using the Google Maps APIVisualization Using the Google Maps API
Visualization Using the Google Maps APIMartin Kleppe
 
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the BrowserWhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the BrowserMartin Kleppe
 
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 FlashOssama 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 ServicesStephan 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 HeroesElectronic 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.pdfShaiAlmog1
 
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 mappingIvano Malavolta
 
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.pdfShaiAlmog1
 
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 capabilitiesMicrosoft Tech Community
 
[2015/2016] Geolocation and mapping
[2015/2016] Geolocation and mapping[2015/2016] Geolocation and mapping
[2015/2016] Geolocation and mappingIvano Malavolta
 
Developing Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual EarthDeveloping Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual Earthgoodfriday
 
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 servicesIvano 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óduMilos 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 heroAllan 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 Nodepdeschen
 
Seeing your place in a new way - NodeconfEU 2018
Seeing your place in a new way -  NodeconfEU 2018Seeing your place in a new way -  NodeconfEU 2018
Seeing your place in a new way - NodeconfEU 2018Melissa Auclaire
 

Similar to Google Maps API Overview (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
 
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
 
Seeing your place in a new way - NodeconfEU 2018
Seeing your place in a new way -  NodeconfEU 2018Seeing your place in a new way -  NodeconfEU 2018
Seeing your place in a new way - NodeconfEU 2018
 

Google Maps API Overview

  • 1. Google Maps API Martin Kleppe / Ubilabs
  • 2. Martin Kleppe | @aemkei
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 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
  • 14.
  • 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(); ... } );
  • 19.
  • 21.
  • 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) { ... });
  • 25.
  • 26.
  • 27.
  • 28. "duration" : { "text" : "35 mins", "value" : 2093 }, "duration_in_traffic" : { "text" : "46 mins", "value" : 2767 }
  • 30.
  • 31.
  • 32. var service = new google.maps.ElevationService(); var options = { path: latLngs, samples: 256 }; service.getElevationAlongPath( options, plotElevation ); function plotElevation(results) { ... });
  • 34.
  • 36. { dstOffset: 0, rawOffset: 3600, status: "OK", timeZoneId: "Europe/Berlin", timeZoneName: "Central European Standard Time" }
  • 38.
  • 39. var options = { position: location, pov: { heading: 165, pitch: 0, zoom: 1 } }; new google.maps.StreetViewPanorama( document.getElementById('pano'), options );
  • 40. 45°
  • 41.
  • 42.
  • 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(); ... } );
  • 48.
  • 50.
  • 51.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59. var styles = [ { featureType: 'road', elementType: 'geometry', stylers: [ { hue: -45 }, { saturation: 100 } ] } ]; var mapOptions = { ... styles: styles };
  • 60.
  • 61.
  • 63.
  • 64.
  • 66.
  • 67. var units = google.maps.weather.TemperatureUnit.FAHRENHEIT; new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map }); new google.maps.weather.CloudLayer({ map: map });
  • 70.
  • 73.
  • 74.
  • 76.
  • 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 });
  • 78.
  • 80.
  • 82.
  • 83.
  • 84.
  • 85. Q&A
  • 86.
  • 87. Google Maps API Martin Kleppe / Ubilabs