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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Google Maps JS API

Similar to Google Maps JS API (20)

More from Alberto Simões

More from Alberto Simões (20)

Google Maps JS API