SlideShare uma empresa Scribd logo
1 de 87
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

12. Android Basic Google Map
12. Android Basic Google Map12. Android Basic Google Map
12. Android Basic Google MapOum Saokosal
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST APIFabien Vauchelles
 
Automated Security Analysis of Android & iOS Applications with Mobile Securit...
Automated Security Analysis of Android & iOS Applications with Mobile Securit...Automated Security Analysis of Android & iOS Applications with Mobile Securit...
Automated Security Analysis of Android & iOS Applications with Mobile Securit...Ajin Abraham
 
Advanced Security With GeoServer
Advanced Security With GeoServerAdvanced Security With GeoServer
Advanced Security With GeoServerGeoSolutions
 
라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션
라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션
라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션Impyeong Lee
 
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판BJ Jang
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsVikash Singh
 
Declarative UIs with Jetpack Compose
Declarative UIs with Jetpack ComposeDeclarative UIs with Jetpack Compose
Declarative UIs with Jetpack ComposeRamon Ribeiro Rabello
 
Android studio 2.0: default project structure
Android studio 2.0: default project structureAndroid studio 2.0: default project structure
Android studio 2.0: default project structureVyara Georgieva
 
Broadcast Receivers in Android
Broadcast Receivers in AndroidBroadcast Receivers in Android
Broadcast Receivers in Androidma-polimi
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptAdieu
 
Publishing and delivery of mobile application
Publishing and delivery of mobile applicationPublishing and delivery of mobile application
Publishing and delivery of mobile applicationK Senthil Kumar
 
Firebase on Android: The Big Picture
Firebase on Android: The Big PictureFirebase on Android: The Big Picture
Firebase on Android: The Big PictureSriyank Siddhartha
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Sura Gonzalez
 

Mais procurados (20)

12. Android Basic Google Map
12. Android Basic Google Map12. Android Basic Google Map
12. Android Basic Google Map
 
Fetch API Talk
Fetch API TalkFetch API Talk
Fetch API Talk
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API
 
Automated Security Analysis of Android & iOS Applications with Mobile Securit...
Automated Security Analysis of Android & iOS Applications with Mobile Securit...Automated Security Analysis of Android & iOS Applications with Mobile Securit...
Automated Security Analysis of Android & iOS Applications with Mobile Securit...
 
Advanced Security With GeoServer
Advanced Security With GeoServerAdvanced Security With GeoServer
Advanced Security With GeoServer
 
Google Maps JS API
Google Maps JS APIGoogle Maps JS API
Google Maps JS API
 
Google Maps API
Google Maps APIGoogle Maps API
Google Maps API
 
라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션
라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션
라이브드론맵 (Live Drone Map) - 실시간 드론 매핑 솔루션
 
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
Open Source GIS 기초교육 4일차 - GeoServer 기초 2014년 7월판
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Angular 14.pptx
Angular 14.pptxAngular 14.pptx
Angular 14.pptx
 
Declarative UIs with Jetpack Compose
Declarative UIs with Jetpack ComposeDeclarative UIs with Jetpack Compose
Declarative UIs with Jetpack Compose
 
Android studio 2.0: default project structure
Android studio 2.0: default project structureAndroid studio 2.0: default project structure
Android studio 2.0: default project structure
 
Broadcast Receivers in Android
Broadcast Receivers in AndroidBroadcast Receivers in Android
Broadcast Receivers in Android
 
Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Publishing and delivery of mobile application
Publishing and delivery of mobile applicationPublishing and delivery of mobile application
Publishing and delivery of mobile application
 
Introduction to NodeJS
Introduction to NodeJSIntroduction to NodeJS
Introduction to NodeJS
 
Firebase on Android: The Big Picture
Firebase on Android: The Big PictureFirebase on Android: The Big Picture
Firebase on Android: The Big Picture
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
 

Destaque

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
 

Destaque (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
 

Semelhante a 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
 

Semelhante a 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
 
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 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