SlideShare a Scribd company logo
1 of 55
Download to read offline
Google Maps JS API
Alberto Simões ambs@di.uminho.pt
Terms of Use and Privacy
● Available both as free and paid services;
● Free service is limited:
○ 25 000 map loads per day.
○ soft quota.
● Needs service API key;
● Can be controlled per-host or using OAuth
credentials.
Obtaining an API Key
● Google APIs are controlled at https:
//console.developers.google.com
● Each API should be activated independently.
Obtaining an API Key
Basic HTML for Google Maps
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?
key=_KEY_&sensor=false">
</script>
Basic HTML for Google Maps
Basic HTML for Google Maps
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new
google.maps.LatLng(41.5442, -8.3219),
zoom: 3
};
...
Basic HTML for Google Maps
var map = new
google.maps.Map(
document.getElementById(
"map-canvas"
), mapOptions);
}
google.maps.event.addDomListener(
window, 'load', initialize);
</script>
Basic HTML for Google Maps
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Basic HTML for Google Maps
Default UI
By default, Google Maps include:
● Zoom Control (enabled);
● Pan Control (enabled);
● Scale Control (disabled);
● Map Type Control (enabled);
● Street View Control (enabled);
● Rotate Control (enabled for 45º view);
● Overview Map Control (enabled…).
Disabling/Enabling the Default UI
Disabling completely the default behaviour:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
}
var map = new google.maps.Map(..., mapOptions);
}
Disabling/Enabling the Default UI
Controlling each UI object:
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
panControl: false, zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
}
Disabling/Enabling the Default UI
Configuring the Default UI
Elements can be configured in different ways:
● Zoom Control have two different sizes;
● Map Type can be shown as a toolbar or a
drop-down menu;
● …
Elements can be placed in 8 different positions.
Configuring the Default UI
var mapOptions = {
center: new google.maps.LatLng(41.5442, -8.3219),
zoom: 3,
panControl: false, mapTypeControl: false,
streetViewControl: false, overviewMapControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
},
};
Configuring the Default UI
More on UI
It is possible to define custom buttons:
● based on XHTML and CSS;
● the control is pushed in a stack of controls in
the desired position;
● to the control is associated a javascript
method.
Using Markers
● Each mark is placed in a latitude/longitude;
● Markers have a specific title (tooltip);
● They can be removed;
● Support animations;
● Customizable to other icons;
Placing a Marker
<script type="text/javascript">
function initialize() {
var braga = new google.maps.LatLng(41.5442, -8.3219);
var mapOptions = { zoom: 8, center: braga };
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: braga, map: map, title: "Braga"
});
}
google.maps.event.addDomListener(window, 'load',
initialize);
</script>
Placing a Marker
Removing a Marker when DblClicked
function initialize() {
var braga = new google.maps.LatLng(41.5345, -8.4250);
var mapOptions = { zoom: 8, center: braga };
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: braga, map: map, title: "Braga"
});
google.maps.event.addListener(marker, ‘dblclick’,
function() { marker.setMap(null); });
}
Animating a Marker
function initialize() {
// ...
var marker = new google.maps.Marker({
position: braga, map: map, title: "Braga",
animation: google.maps.Animation.DROP,
});
google.maps.event.addListener(marker, 'click', function() {
if (marker.getAnimation() != null)
marker.setAnimation(null);
else
marker.setAnimation(google.maps.Animation.BOUNCE);
});
google.maps.event.addListener(marker, 'dblclick',
function() { marker.setMap(null); });
}
Custom Markers
function initialize() {
var braga = new google.maps.LatLng(41.5345, -8.4250);
var mapOptions = { zoom: 8, center: braga };
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var image = "icon.png";
var marker = new google.maps.Marker({
position: braga,
map: map,
title: "Braga",
icon: image,
});
}
Custom Markers
Info Windows
● Present geo-referenced text in a small
window;
● Usually they are placed with a marker;
● But can be placed directly on a
latitude/longitude object.
● Can contain any HTML content. You can
force its width by CSS.
Info Window at Marker
function initialize() {
var braga = new google.maps.LatLng(41.5345, -8.4250);
var mapOptions = { center: braga, zoom: 10 };
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow( {
content: '<div id="content">some <b>HTML</b></div>’,
maxWidth: 200,
});
var marker = new google.maps.Marker( {
position: braga, map: map, title: 'Braga'
});
google.maps.event.addListener(marker, 'click',
function() { infowindow.open(map, marker); });
}
Info Window at Marker
Info Window at LatLng object
function initialize() {
var braga = new google.maps.LatLng(41.5345, -8.4250);
var mapOptions = { center: braga, zoom: 10 };
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow( {
position: braga,
content: '<div id="content">some <b>HTML</b></div>’,
maxWidth: 200,
});
infowindow.open(map, marker);
}
Info Window at LatLng object
Closing Info Window
...
var infowindow = new google.maps.InfoWindow( {
content: '<div id="content">some <b>HTML</b></div>’,
maxWidth: 200,
});
var marker = new google.maps.Marker( {
position: braga, map: map, title: 'Braga'
});
google.maps.event.addListener(marker, 'click',
function() { infowindow.open(map, marker); });
google.maps.event.addListener(marker, 'dblclick',
function() { infowindow.close(); });
}
Drawing on a Map
● Can draw:
● Lines;
● Polylines;
● Circles;
● Rectangles.
● These shapes can be configured to be
draggable and editable by users.
Drawing a Polyline
function initialize() {
var braga = new google.maps.LatLng(41.5645, -8.4250);
var mapOptions = { center: braga, zoom: 10 };
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var lineCoords = [ braga,
new google.maps.LatLng(41.5000, -8.4250),
new google.maps.LatLng(41.5000, -8.3500),
new google.maps.LatLng(41.4500, -8.3000) ];
var line = new google.maps.Polyline({
path: lineCoords, strokeColor: '#FF0000',
strokeOpacity: 0.5, strokeWeight: 20,
});
line.setMap(map);
}
Drawing a Polyline
Services: Overview
● Directions
● Distances
● Elevation
● GeoCoding
● Maximum Zoom Imagery
● Street View
● Libraries
○ Places, AdSense, Panoramio, ...
GeoCoding Service
● Allows the conversion of a text address in its
LatLng coordinates,
● Allows the conversion of a coordinate pair
into a text address:
○ At different levels
■ Street
■ County
■ State
■ Country
GeoCoding Request
A GeoCoding request looks like:
{
address: string, // These two are required
location: LatLng,// and mutually exclusive
bounds: LatLngBounds,
region: string
}
GeoCoding Response
A GeoCoding response looks like:
results[]: {
types[]: string, formatted_address: string,
address_components[]: {
short_name: string, long_name: string,
postcode_localities[]: string, types[]: string
},
partial_match: boolean,
geometry: {
location: LatLng, location_type:
GeocoderLocationType
viewport: LatLngBounds, bounds: LatLngBounds
}
}
GeoCoding Example
Given a click on a map:
1) get the LatLng coordinates,
2) get the country name they belong to.
GeoCoding Example
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.5442, -8.3219),
zoom: 3
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
...
GeoCoding Example
...
google.maps.event.addListener(map, 'click',
function (event) {
var coder = new google.maps.Geocoder();
var request = { location: event.latLng };
coder.geocode(request,
function (results, status) {
if (status == "OK") {
var country = guessCountry(results);
alert(country);
} else {
alert(“no country?”);
}
});
});
} /* end initialize */
GeoCoding Example
function guessCountry(geocoderResults) {
for (var i = 0; i < geocoderResults.length; i++) {
var res = geocoderResults[i];
for (var j = 0; j < res.address_components.length; j++){
var comp = res.address_components[j];
if (jQuery.inArray("country", comp.types) >= 0) {
return comp.long_name;
}
}
}
return "??";
}
To use jQuery in need to include it:
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
GeoCoding Example
Fusion Tables Introduction
● Fusion tables are a relational database;
● Each user can create and share tables;
● There are tables with relevant information:
○ butterflies species in USA;
○ countries and their number of inhabitants;
○ and many other userfull and futile information.
A Relevant Fusion Table...
Table id: 12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0
A Relevant Fusion Table...
A Relevant Fusion Table...
A Relevant Fusion Table...
A Relevant Fusion Table...
Fusion Tables Layers
It is possible to render KML over a map.
Example: Given a click on a map:
1) get the LatLng coordinates,
2) get the country name they belong to.
3) draw it over the map
4) new clicks remove the country draw,
...and starts again (goto 1).
Fusion Tables Layers
// define this outside
var layer = null;
Fusion Tables Layers
google.maps.event.addListener(map, 'click',
function (event) {
var coder = new google.maps.Geocoder();
var request = { location: event.latLng };
coder.geocode(request, function (results, status) {
if (status == "OK") {
var country = guessCountry(results);
if (layer != null) { layer.setMap(null); }
layer = new google.maps.FusionTablesLayer({
query: { select: 'geometry',
from: '12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0',
where: "name = '" + country + "'", },
});
layer.setMap(map);
} }); });
Fusion Tables Layers
Reference
https://developers.google.
com/maps/documentation/javascript/3.
exp/reference
Google Maps JS API
Alberto Simões ambs@di.uminho.pt

More Related Content

What's hot

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
 
Geo server 성능향상을 위한 튜닝 기법 20111028
Geo server 성능향상을 위한 튜닝 기법 20111028Geo server 성능향상을 위한 튜닝 기법 20111028
Geo server 성능향상을 위한 튜닝 기법 20111028BJ Jang
 
[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례
[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례
[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례BJ Jang
 
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화MinPa Lee
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introductionLuigi De Russis
 
오픈소스GIS 개발 일반 강의자료
오픈소스GIS 개발 일반 강의자료오픈소스GIS 개발 일반 강의자료
오픈소스GIS 개발 일반 강의자료BJ Jang
 
쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGLMyung Woon Oh
 
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Martin Kleppe
 
PostGIS - National Education Center for GIS: Open Source GIS
PostGIS - National Education Center for GIS: Open Source GIS PostGIS - National Education Center for GIS: Open Source GIS
PostGIS - National Education Center for GIS: Open Source GIS MinPa Lee
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats newSandun Perera
 
Jetpack Navigation Component
Jetpack Navigation ComponentJetpack Navigation Component
Jetpack Navigation ComponentJames Shvarts
 
Android JetPack: easy navigation with the new Navigation Controller
Android JetPack: easy navigation with the new Navigation ControllerAndroid JetPack: easy navigation with the new Navigation Controller
Android JetPack: easy navigation with the new Navigation ControllerLeonardo Pirro
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
MongoDB GeoSpatial Feature
MongoDB GeoSpatial FeatureMongoDB GeoSpatial Feature
MongoDB GeoSpatial FeatureHüseyin BABAL
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by MukeshMukesh Kumar
 
Hibernate presentation
Hibernate presentationHibernate presentation
Hibernate presentationManav Prasad
 
State of OpenGXT: 오픈소스 공간분석엔진
State of OpenGXT: 오픈소스 공간분석엔진State of OpenGXT: 오픈소스 공간분석엔진
State of OpenGXT: 오픈소스 공간분석엔진MinPa Lee
 

What's hot (20)

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월판
 
Geo server 성능향상을 위한 튜닝 기법 20111028
Geo server 성능향상을 위한 튜닝 기법 20111028Geo server 성능향상을 위한 튜닝 기법 20111028
Geo server 성능향상을 위한 튜닝 기법 20111028
 
[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례
[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례
[Foss4 g2013 korea]postgis와 geoserver를 이용한 대용량 공간데이터 기반 일기도 서비스 구축 사례
 
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
 
[React-Native Tutorial] Map
[React-Native Tutorial] Map[React-Native Tutorial] Map
[React-Native Tutorial] Map
 
오픈소스GIS 개발 일반 강의자료
오픈소스GIS 개발 일반 강의자료오픈소스GIS 개발 일반 강의자료
오픈소스GIS 개발 일반 강의자료
 
쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL
 
GeoServer 기초
GeoServer 기초GeoServer 기초
GeoServer 기초
 
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
 
PostGIS - National Education Center for GIS: Open Source GIS
PostGIS - National Education Center for GIS: Open Source GIS PostGIS - National Education Center for GIS: Open Source GIS
PostGIS - National Education Center for GIS: Open Source GIS
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
Jetpack Navigation Component
Jetpack Navigation ComponentJetpack Navigation Component
Jetpack Navigation Component
 
Android JetPack: easy navigation with the new Navigation Controller
Android JetPack: easy navigation with the new Navigation ControllerAndroid JetPack: easy navigation with the new Navigation Controller
Android JetPack: easy navigation with the new Navigation Controller
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
MongoDB GeoSpatial Feature
MongoDB GeoSpatial FeatureMongoDB GeoSpatial Feature
MongoDB GeoSpatial Feature
 
HTML5
HTML5HTML5
HTML5
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
Hibernate presentation
Hibernate presentationHibernate presentation
Hibernate presentation
 
State of OpenGXT: 오픈소스 공간분석엔진
State of OpenGXT: 오픈소스 공간분석엔진State of OpenGXT: 오픈소스 공간분석엔진
State of OpenGXT: 오픈소스 공간분석엔진
 

Viewers also liked

Google Maps API
Google Maps APIGoogle Maps API
Google Maps APIDave Ross
 
Ubilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesUbilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesMartin Kleppe
 
Google Maps Presentation
Google Maps PresentationGoogle Maps Presentation
Google Maps PresentationDavid Kamerer
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
Mapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APIMapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APINAILBITER
 
Google Maps API
Google Maps APIGoogle Maps API
Google Maps APIhchen1
 
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
 
Business application of internet
Business application of internetBusiness application of internet
Business application of internetNelson Kuriakose
 
Technology's New Role in Healthcare
Technology's New Role in HealthcareTechnology's New Role in Healthcare
Technology's New Role in HealthcarePrimacy
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHPBradley Holt
 
PHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisPHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisIan Macali
 

Viewers also liked (20)

Google Maps API
Google Maps APIGoogle Maps API
Google Maps API
 
Ubilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best PracticesUbilabs: Google Maps API - Best Practices
Ubilabs: Google Maps API - Best Practices
 
Google Maps Presentation
Google Maps PresentationGoogle Maps Presentation
Google Maps Presentation
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Mapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript APIMapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript API
 
Geolocation and Mapping
Geolocation and MappingGeolocation and Mapping
Geolocation and Mapping
 
Google Maps API
Google Maps APIGoogle Maps API
Google Maps API
 
Google maps
Google mapsGoogle maps
Google maps
 
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
 
MySQL Introduction
MySQL IntroductionMySQL Introduction
MySQL Introduction
 
File Upload
File UploadFile Upload
File Upload
 
Google Maps
Google MapsGoogle Maps
Google Maps
 
Introduction to MySQL
Introduction to MySQLIntroduction to MySQL
Introduction to MySQL
 
Introduction to Mysql
Introduction to MysqlIntroduction to Mysql
Introduction to Mysql
 
Business application of internet
Business application of internetBusiness application of internet
Business application of internet
 
Technology's New Role in Healthcare
Technology's New Role in HealthcareTechnology's New Role in Healthcare
Technology's New Role in Healthcare
 
MySql slides (ppt)
MySql slides (ppt)MySql slides (ppt)
MySql slides (ppt)
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php mysql ppt
 
PHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisPHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with this
 

Similar to Google Maps JS API

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
 
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
 
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
 
Gmaps Railscamp2008
Gmaps Railscamp2008Gmaps Railscamp2008
Gmaps Railscamp2008xilinus
 
Integration of Google-map in Rails Application
Integration of Google-map in Rails ApplicationIntegration of Google-map in Rails Application
Integration of Google-map in Rails ApplicationSwati Jadhav
 
Grails : Ordr, Maps & Charts
Grails : Ordr, Maps & ChartsGrails : Ordr, Maps & Charts
Grails : Ordr, Maps & ChartsHenk Jurriens
 
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
 
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
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands Oncodebits
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-Oncodebits
 
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
 
Hands on with the Google Maps Data API
Hands on with the Google Maps Data APIHands on with the Google Maps Data API
Hands on with the Google Maps Data APIss318
 
โค๊ดที่ใช้ทำ Custom markers หรือการปักหมุด
โค๊ดที่ใช้ทำ Custom markers หรือการปักหมุดโค๊ดที่ใช้ทำ Custom markers หรือการปักหมุด
โค๊ดที่ใช้ทำ Custom markers หรือการปักหมุดranggo24
 
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)Kanika Garg
 
Developing Spatial Applications with Google Maps and CARTO
Developing Spatial Applications with Google Maps and CARTODeveloping Spatial Applications with Google Maps and CARTO
Developing Spatial Applications with Google Maps and CARTOCARTO
 

Similar to Google Maps JS API (20)

Google Maps Api
Google Maps ApiGoogle Maps Api
Google Maps Api
 
Google Maps API 101
Google Maps API 101Google Maps API 101
Google Maps API 101
 
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.
 
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
 
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
 
Gmaps Railscamp2008
Gmaps Railscamp2008Gmaps Railscamp2008
Gmaps Railscamp2008
 
Integration of Google-map in Rails Application
Integration of Google-map in Rails ApplicationIntegration of Google-map in Rails Application
Integration of Google-map in Rails Application
 
Grails : Ordr, Maps & Charts
Grails : Ordr, Maps & ChartsGrails : Ordr, Maps & Charts
Grails : Ordr, Maps & Charts
 
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
 
@Ionic native/google-maps
@Ionic native/google-maps@Ionic native/google-maps
@Ionic native/google-maps
 
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
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands On
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-On
 
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
 
Intro To Google Maps
Intro To Google MapsIntro To Google Maps
Intro To Google Maps
 
Hands on with the Google Maps Data API
Hands on with the Google Maps Data APIHands on with the Google Maps Data API
Hands on with the Google Maps Data API
 
โค๊ดที่ใช้ทำ Custom markers หรือการปักหมุด
โค๊ดที่ใช้ทำ Custom markers หรือการปักหมุดโค๊ดที่ใช้ทำ Custom markers หรือการปักหมุด
โค๊ดที่ใช้ทำ Custom markers หรือการปักหมุด
 
51811680 open layers
51811680 open layers51811680 open layers
51811680 open layers
 
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
Google Chart Tools Kanika Garg (10BM60035) Lavanya R. (10BM60042)
 
Developing Spatial Applications with Google Maps and CARTO
Developing Spatial Applications with Google Maps and CARTODeveloping Spatial Applications with Google Maps and CARTO
Developing Spatial Applications with Google Maps and CARTO
 

More from Alberto Simões

Language Identification: A neural network approach
Language Identification: A neural network approachLanguage Identification: A neural network approach
Language Identification: A neural network approachAlberto Simões
 
Making the most of a 100-year-old dictionary
Making the most of a 100-year-old dictionaryMaking the most of a 100-year-old dictionary
Making the most of a 100-year-old dictionaryAlberto Simões
 
Dictionary Alignment by Rewrite-based Entry Translation
Dictionary Alignment by Rewrite-based Entry TranslationDictionary Alignment by Rewrite-based Entry Translation
Dictionary Alignment by Rewrite-based Entry TranslationAlberto Simões
 
EMLex-A5: Specialized Dictionaries
EMLex-A5: Specialized DictionariesEMLex-A5: Specialized Dictionaries
EMLex-A5: Specialized DictionariesAlberto Simões
 
Aula 04 - Introdução aos Diagramas de Sequência
Aula 04 - Introdução aos Diagramas de SequênciaAula 04 - Introdução aos Diagramas de Sequência
Aula 04 - Introdução aos Diagramas de SequênciaAlberto Simões
 
Aula 03 - Introdução aos Diagramas de Atividade
Aula 03 - Introdução aos Diagramas de AtividadeAula 03 - Introdução aos Diagramas de Atividade
Aula 03 - Introdução aos Diagramas de AtividadeAlberto Simões
 
Aula 02 - Engenharia de Requisitos
Aula 02 - Engenharia de RequisitosAula 02 - Engenharia de Requisitos
Aula 02 - Engenharia de RequisitosAlberto Simões
 
Aula 01 - Planeamento de Sistemas de Informação
Aula 01 - Planeamento de Sistemas de InformaçãoAula 01 - Planeamento de Sistemas de Informação
Aula 01 - Planeamento de Sistemas de InformaçãoAlberto Simões
 
Building C and C++ libraries with Perl
Building C and C++ libraries with PerlBuilding C and C++ libraries with Perl
Building C and C++ libraries with PerlAlberto Simões
 
Processing XML: a rewriting system approach
Processing XML: a rewriting system approachProcessing XML: a rewriting system approach
Processing XML: a rewriting system approachAlberto Simões
 
Arquitecturas de Tradução Automática
Arquitecturas de Tradução AutomáticaArquitecturas de Tradução Automática
Arquitecturas de Tradução AutomáticaAlberto Simões
 
Extracção de Recursos para Tradução Automática
Extracção de Recursos para Tradução AutomáticaExtracção de Recursos para Tradução Automática
Extracção de Recursos para Tradução AutomáticaAlberto Simões
 

More from Alberto Simões (20)

Source Code Quality
Source Code QualitySource Code Quality
Source Code Quality
 
Language Identification: A neural network approach
Language Identification: A neural network approachLanguage Identification: A neural network approach
Language Identification: A neural network approach
 
Making the most of a 100-year-old dictionary
Making the most of a 100-year-old dictionaryMaking the most of a 100-year-old dictionary
Making the most of a 100-year-old dictionary
 
Dictionary Alignment by Rewrite-based Entry Translation
Dictionary Alignment by Rewrite-based Entry TranslationDictionary Alignment by Rewrite-based Entry Translation
Dictionary Alignment by Rewrite-based Entry Translation
 
EMLex-A5: Specialized Dictionaries
EMLex-A5: Specialized DictionariesEMLex-A5: Specialized Dictionaries
EMLex-A5: Specialized Dictionaries
 
Modelação de Dados
Modelação de DadosModelação de Dados
Modelação de Dados
 
Aula 04 - Introdução aos Diagramas de Sequência
Aula 04 - Introdução aos Diagramas de SequênciaAula 04 - Introdução aos Diagramas de Sequência
Aula 04 - Introdução aos Diagramas de Sequência
 
Aula 03 - Introdução aos Diagramas de Atividade
Aula 03 - Introdução aos Diagramas de AtividadeAula 03 - Introdução aos Diagramas de Atividade
Aula 03 - Introdução aos Diagramas de Atividade
 
Aula 02 - Engenharia de Requisitos
Aula 02 - Engenharia de RequisitosAula 02 - Engenharia de Requisitos
Aula 02 - Engenharia de Requisitos
 
Aula 01 - Planeamento de Sistemas de Informação
Aula 01 - Planeamento de Sistemas de InformaçãoAula 01 - Planeamento de Sistemas de Informação
Aula 01 - Planeamento de Sistemas de Informação
 
Building C and C++ libraries with Perl
Building C and C++ libraries with PerlBuilding C and C++ libraries with Perl
Building C and C++ libraries with Perl
 
PLN em Perl
PLN em PerlPLN em Perl
PLN em Perl
 
Classification Systems
Classification SystemsClassification Systems
Classification Systems
 
Redes de Pert
Redes de PertRedes de Pert
Redes de Pert
 
Dancing Tutorial
Dancing TutorialDancing Tutorial
Dancing Tutorial
 
Processing XML: a rewriting system approach
Processing XML: a rewriting system approachProcessing XML: a rewriting system approach
Processing XML: a rewriting system approach
 
Sistemas de Numeração
Sistemas de NumeraçãoSistemas de Numeração
Sistemas de Numeração
 
Álgebra de Boole
Álgebra de BooleÁlgebra de Boole
Álgebra de Boole
 
Arquitecturas de Tradução Automática
Arquitecturas de Tradução AutomáticaArquitecturas de Tradução Automática
Arquitecturas de Tradução Automática
 
Extracção de Recursos para Tradução Automática
Extracção de Recursos para Tradução AutomáticaExtracção de Recursos para Tradução Automática
Extracção de Recursos para Tradução Automática
 

Recently uploaded

overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of VirtualizationRajan yadav
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Eric Johnson
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technologysoufianbouktaib1
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfMaria Adalfio
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...hasimatwork
 
Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxlibertyuae uae
 
SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxJustineGarcia32
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?krc0yvm5
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondContinuent
 

Recently uploaded (10)

overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualization
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technology
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdf
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
 
Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptx
 
SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptx
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
 

Google Maps JS API

  • 1. Google Maps JS API Alberto Simões ambs@di.uminho.pt
  • 2. Terms of Use and Privacy ● Available both as free and paid services; ● Free service is limited: ○ 25 000 map loads per day. ○ soft quota. ● Needs service API key; ● Can be controlled per-host or using OAuth credentials.
  • 3. Obtaining an API Key ● Google APIs are controlled at https: //console.developers.google.com ● Each API should be activated independently.
  • 5. Basic HTML for Google Maps <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style>
  • 7. Basic HTML for Google Maps <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3 }; ...
  • 8. Basic HTML for Google Maps var map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions); } google.maps.event.addDomListener( window, 'load', initialize); </script>
  • 9. Basic HTML for Google Maps </head> <body> <div id="map-canvas"/> </body> </html>
  • 10. Basic HTML for Google Maps
  • 11. Default UI By default, Google Maps include: ● Zoom Control (enabled); ● Pan Control (enabled); ● Scale Control (disabled); ● Map Type Control (enabled); ● Street View Control (enabled); ● Rotate Control (enabled for 45º view); ● Overview Map Control (enabled…).
  • 12. Disabling/Enabling the Default UI Disabling completely the default behaviour: function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true, } var map = new google.maps.Map(..., mapOptions); }
  • 13. Disabling/Enabling the Default UI Controlling each UI object: var mapOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, }
  • 15. Configuring the Default UI Elements can be configured in different ways: ● Zoom Control have two different sizes; ● Map Type can be shown as a toolbar or a drop-down menu; ● … Elements can be placed in 8 different positions.
  • 16. Configuring the Default UI var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3, panControl: false, mapTypeControl: false, streetViewControl: false, overviewMapControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, }, };
  • 18. More on UI It is possible to define custom buttons: ● based on XHTML and CSS; ● the control is pushed in a stack of controls in the desired position; ● to the control is associated a javascript method.
  • 19. Using Markers ● Each mark is placed in a latitude/longitude; ● Markers have a specific title (tooltip); ● They can be removed; ● Support animations; ● Customizable to other icons;
  • 20. Placing a Marker <script type="text/javascript"> function initialize() { var braga = new google.maps.LatLng(41.5442, -8.3219); var mapOptions = { zoom: 8, center: braga }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga" }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
  • 22. Removing a Marker when DblClicked function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { zoom: 8, center: braga }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga" }); google.maps.event.addListener(marker, ‘dblclick’, function() { marker.setMap(null); }); }
  • 23. Animating a Marker function initialize() { // ... var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga", animation: google.maps.Animation.DROP, }); google.maps.event.addListener(marker, 'click', function() { if (marker.getAnimation() != null) marker.setAnimation(null); else marker.setAnimation(google.maps.Animation.BOUNCE); }); google.maps.event.addListener(marker, 'dblclick', function() { marker.setMap(null); }); }
  • 24. Custom Markers function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { zoom: 8, center: braga }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var image = "icon.png"; var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga", icon: image, }); }
  • 26. Info Windows ● Present geo-referenced text in a small window; ● Usually they are placed with a marker; ● But can be placed directly on a latitude/longitude object. ● Can contain any HTML content. You can force its width by CSS.
  • 27. Info Window at Marker function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { center: braga, zoom: 10 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var infowindow = new google.maps.InfoWindow( { content: '<div id="content">some <b>HTML</b></div>’, maxWidth: 200, }); var marker = new google.maps.Marker( { position: braga, map: map, title: 'Braga' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); }
  • 28. Info Window at Marker
  • 29. Info Window at LatLng object function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { center: braga, zoom: 10 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var infowindow = new google.maps.InfoWindow( { position: braga, content: '<div id="content">some <b>HTML</b></div>’, maxWidth: 200, }); infowindow.open(map, marker); }
  • 30. Info Window at LatLng object
  • 31. Closing Info Window ... var infowindow = new google.maps.InfoWindow( { content: '<div id="content">some <b>HTML</b></div>’, maxWidth: 200, }); var marker = new google.maps.Marker( { position: braga, map: map, title: 'Braga' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); google.maps.event.addListener(marker, 'dblclick', function() { infowindow.close(); }); }
  • 32. Drawing on a Map ● Can draw: ● Lines; ● Polylines; ● Circles; ● Rectangles. ● These shapes can be configured to be draggable and editable by users.
  • 33. Drawing a Polyline function initialize() { var braga = new google.maps.LatLng(41.5645, -8.4250); var mapOptions = { center: braga, zoom: 10 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var lineCoords = [ braga, new google.maps.LatLng(41.5000, -8.4250), new google.maps.LatLng(41.5000, -8.3500), new google.maps.LatLng(41.4500, -8.3000) ]; var line = new google.maps.Polyline({ path: lineCoords, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 20, }); line.setMap(map); }
  • 35. Services: Overview ● Directions ● Distances ● Elevation ● GeoCoding ● Maximum Zoom Imagery ● Street View ● Libraries ○ Places, AdSense, Panoramio, ...
  • 36. GeoCoding Service ● Allows the conversion of a text address in its LatLng coordinates, ● Allows the conversion of a coordinate pair into a text address: ○ At different levels ■ Street ■ County ■ State ■ Country
  • 37. GeoCoding Request A GeoCoding request looks like: { address: string, // These two are required location: LatLng,// and mutually exclusive bounds: LatLngBounds, region: string }
  • 38. GeoCoding Response A GeoCoding response looks like: results[]: { types[]: string, formatted_address: string, address_components[]: { short_name: string, long_name: string, postcode_localities[]: string, types[]: string }, partial_match: boolean, geometry: { location: LatLng, location_type: GeocoderLocationType viewport: LatLngBounds, bounds: LatLngBounds } }
  • 39. GeoCoding Example Given a click on a map: 1) get the LatLng coordinates, 2) get the country name they belong to.
  • 40. GeoCoding Example function initialize() { var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); ...
  • 41. GeoCoding Example ... google.maps.event.addListener(map, 'click', function (event) { var coder = new google.maps.Geocoder(); var request = { location: event.latLng }; coder.geocode(request, function (results, status) { if (status == "OK") { var country = guessCountry(results); alert(country); } else { alert(“no country?”); } }); }); } /* end initialize */
  • 42. GeoCoding Example function guessCountry(geocoderResults) { for (var i = 0; i < geocoderResults.length; i++) { var res = geocoderResults[i]; for (var j = 0; j < res.address_components.length; j++){ var comp = res.address_components[j]; if (jQuery.inArray("country", comp.types) >= 0) { return comp.long_name; } } } return "??"; } To use jQuery in need to include it: <script src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>
  • 44. Fusion Tables Introduction ● Fusion tables are a relational database; ● Each user can create and share tables; ● There are tables with relevant information: ○ butterflies species in USA; ○ countries and their number of inhabitants; ○ and many other userfull and futile information.
  • 45. A Relevant Fusion Table... Table id: 12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0
  • 46. A Relevant Fusion Table...
  • 47. A Relevant Fusion Table...
  • 48. A Relevant Fusion Table...
  • 49. A Relevant Fusion Table...
  • 50. Fusion Tables Layers It is possible to render KML over a map. Example: Given a click on a map: 1) get the LatLng coordinates, 2) get the country name they belong to. 3) draw it over the map 4) new clicks remove the country draw, ...and starts again (goto 1).
  • 51. Fusion Tables Layers // define this outside var layer = null;
  • 52. Fusion Tables Layers google.maps.event.addListener(map, 'click', function (event) { var coder = new google.maps.Geocoder(); var request = { location: event.latLng }; coder.geocode(request, function (results, status) { if (status == "OK") { var country = guessCountry(results); if (layer != null) { layer.setMap(null); } layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0', where: "name = '" + country + "'", }, }); layer.setMap(map); } }); });
  • 55. Google Maps JS API Alberto Simões ambs@di.uminho.pt