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

Location Based Services
Location Based ServicesLocation Based Services
Location Based ServicesPeter Byrne
 
Software Engineering : OOAD using UML
Software Engineering : OOAD using UMLSoftware Engineering : OOAD using UML
Software Engineering : OOAD using UMLAjit Nayak
 
18306_lec-2 (1).ppt
18306_lec-2 (1).ppt18306_lec-2 (1).ppt
18306_lec-2 (1).pptIshuIswarya3
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJason Hando
 
TYBSC IT PGIS Unit V Data Visualization
TYBSC IT PGIS Unit V  Data VisualizationTYBSC IT PGIS Unit V  Data Visualization
TYBSC IT PGIS Unit V Data VisualizationArti Parab Academics
 
Unit 3 3 architectural design
Unit 3 3 architectural designUnit 3 3 architectural design
Unit 3 3 architectural designHiren Selani
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
TYBSC IT PGIS Unit III Chapter II Data Entry and Preparation
TYBSC IT PGIS Unit III Chapter II Data Entry and PreparationTYBSC IT PGIS Unit III Chapter II Data Entry and Preparation
TYBSC IT PGIS Unit III Chapter II Data Entry and PreparationArti Parab Academics
 
Planning & publishing of website
Planning & publishing of website Planning & publishing of website
Planning & publishing of website Archana Jha
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive modelsAlan Dix
 
10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface DesignMaxx Crawford
 

What's hot (20)

Location Based Services
Location Based ServicesLocation Based Services
Location Based Services
 
Internet GIS
Internet GISInternet GIS
Internet GIS
 
Software Engineering : OOAD using UML
Software Engineering : OOAD using UMLSoftware Engineering : OOAD using UML
Software Engineering : OOAD using UML
 
Web Based GIS
Web Based GISWeb Based GIS
Web Based GIS
 
Color model
Color modelColor model
Color model
 
18306_lec-2 (1).ppt
18306_lec-2 (1).ppt18306_lec-2 (1).ppt
18306_lec-2 (1).ppt
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
TYBSC IT PGIS Unit V Data Visualization
TYBSC IT PGIS Unit V  Data VisualizationTYBSC IT PGIS Unit V  Data Visualization
TYBSC IT PGIS Unit V Data Visualization
 
Unit 3 3 architectural design
Unit 3 3 architectural designUnit 3 3 architectural design
Unit 3 3 architectural design
 
Static dynamic and active web pages
Static dynamic and active web pagesStatic dynamic and active web pages
Static dynamic and active web pages
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
TYBSC IT PGIS Unit III Chapter II Data Entry and Preparation
TYBSC IT PGIS Unit III Chapter II Data Entry and PreparationTYBSC IT PGIS Unit III Chapter II Data Entry and Preparation
TYBSC IT PGIS Unit III Chapter II Data Entry and Preparation
 
Digital photogrammetry
Digital photogrammetryDigital photogrammetry
Digital photogrammetry
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Planning & publishing of website
Planning & publishing of website Planning & publishing of website
Planning & publishing of website
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive models
 
10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design
 
Screen based controls in HCI
Screen based controls in HCIScreen based controls in HCI
Screen based controls in HCI
 
Data structures
Data structuresData structures
Data structures
 

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
 

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
 
Google Maps Api
Google Maps ApiGoogle Maps Api
Google Maps Api
 
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
 
Google Maps JS API
Google Maps JS APIGoogle Maps JS API
Google Maps JS API
 
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
 

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