Google Maps JS API

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.

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>

var map = new
google.maps.Map(
document.getElementById(
"map-canvas"
), mapOptions);
}
google.maps.event.addDomListener(
window, 'load', initialize);
</script>

</head>
<body>
<div id="map-canvas"/>
</body>
</html>

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:
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
}
var map = new google.maps.Map(..., mapOptions);
}

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,
}

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,
},
};

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">
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>

Removing a Marker when DblClicked
position: braga, map: map, title: "Braga"
});
google.maps.event.addListener(marker, ‘dblclick’,
function() { marker.setMap(null); });
}

Animating a 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
var image = "icon.png";
position: braga,
map: map,
title: "Braga",
icon: image,
});
}

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
var mapOptions = { center: braga, zoom: 10 };
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 LatLng object
position: braga,
maxWidth: 200,
});
infowindow.open(map, marker);
}

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

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
var mapOptions = {
center: new google.maps.LatLng(41.5442, -8.3219),
zoom: 3
};
...

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>

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

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

// define this outside
var layer = null;

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

Reference
https://developers.google.
com/maps/documentation/javascript/3.
exp/reference

Google Maps JS API

More Related Content

What's hot

Viewers also liked

Similar to Google Maps JS API

More from Alberto Simões

Google Maps JS API