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.
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>
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.
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); });
}
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);
}
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);
}
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
}
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
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).