Google Maps JS API

Google Maps JS APIAlberto Simões [email protected]

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.

https://console.developers.google.com



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>


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:

function initialize() {

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,

},

};

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


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







position: braga, map: map, title: "Braga"

});

google.maps.event.addListener(marker, ‘dblclick’,

function() { marker.setMap(null); });

}

Animating a Markerfunction initialize() {

// ...


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 Markersfunction initialize() {





var image = "icon.png";


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 Markerfunction 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 objectfunction 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 Polylinefunction 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 Examplefunction 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 Examplefunction 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>

http://code.jquery.com/jquery-1.11.0.min.js

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

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 outsidevar layer = null;

Fusion Tables Layersgoogle.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 APIAlberto Simões [email protected]

Google Maps JS API

Internet

Transcript of Google Maps JS API