Google Maps JS API
-
Upload
alberto-simoes -
Category
Internet
-
view
397 -
download
6
description
Transcript of Google Maps JS API
![Page 1: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/1.jpg)
Google Maps JS APIAlberto Simões [email protected]
![Page 2: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/2.jpg)
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.
![Page 3: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/3.jpg)
Obtaining an API Key
● Google APIs are controlled at https://console.developers.google.com
● Each API should be activated independently.
![Page 4: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/4.jpg)
Obtaining an API Key
![Page 5: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/5.jpg)
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>
![Page 6: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/6.jpg)
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=_KEY_&sensor=false"></script>
Basic HTML for Google Maps
![Page 7: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/7.jpg)
Basic HTML for Google Maps
<script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3 };...
![Page 8: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/8.jpg)
Basic HTML for Google Maps
var map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions);} google.maps.event.addDomListener( window, 'load', initialize);
</script>
![Page 9: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/9.jpg)
Basic HTML for Google Maps
</head> <body>
<div id="map-canvas"/> </body></html>
![Page 10: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/10.jpg)
Basic HTML for Google Maps
![Page 11: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/11.jpg)
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…).
![Page 12: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/12.jpg)
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);
}
![Page 13: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/13.jpg)
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,
}
![Page 14: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/14.jpg)
Disabling/Enabling the Default UI
![Page 15: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/15.jpg)
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.
![Page 16: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/16.jpg)
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,
},
};
![Page 17: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/17.jpg)
Configuring the Default UI
![Page 18: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/18.jpg)
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.
![Page 19: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/19.jpg)
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;
![Page 20: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/20.jpg)
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>
![Page 21: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/21.jpg)
Placing a Marker
![Page 22: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/22.jpg)
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); });
}
![Page 23: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/23.jpg)
Animating a Markerfunction 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); });
}
![Page 24: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/24.jpg)
Custom Markersfunction 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,
});
}
![Page 25: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/25.jpg)
Custom Markers
![Page 26: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/26.jpg)
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.
![Page 27: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/27.jpg)
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); });}
![Page 28: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/28.jpg)
Info Window at Marker
![Page 29: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/29.jpg)
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);}
![Page 30: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/30.jpg)
Info Window at LatLng object
![Page 31: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/31.jpg)
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(); });}
![Page 32: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/32.jpg)
Drawing on a Map
● Can draw:● Lines;● Polylines;● Circles;● Rectangles.
● These shapes can be configured to be draggable and editable by users.
![Page 33: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/33.jpg)
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);
}
![Page 34: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/34.jpg)
Drawing a Polyline
![Page 35: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/35.jpg)
Services: Overview
● Directions● Distances● Elevation● GeoCoding● Maximum Zoom Imagery● Street View● Libraries
○ Places, AdSense, Panoramio, ...
![Page 36: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/36.jpg)
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
![Page 37: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/37.jpg)
GeoCoding Request
A GeoCoding request looks like:
{
address: string, // These two are required location: LatLng,// and mutually exclusive bounds: LatLngBounds,
region: string
}
![Page 38: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/38.jpg)
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
}
}
![Page 39: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/39.jpg)
GeoCoding Example
Given a click on a map: 1) get the LatLng coordinates, 2) get the country name they belong to.
![Page 40: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/40.jpg)
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);
...
![Page 41: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/41.jpg)
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 */
![Page 42: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/42.jpg)
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>
![Page 43: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/43.jpg)
GeoCoding Example
![Page 44: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/44.jpg)
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.
![Page 45: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/45.jpg)
A Relevant Fusion Table...Table id: 12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0
![Page 46: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/46.jpg)
A Relevant Fusion Table...
![Page 47: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/47.jpg)
A Relevant Fusion Table...
![Page 48: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/48.jpg)
A Relevant Fusion Table...
![Page 49: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/49.jpg)
A Relevant Fusion Table...
![Page 50: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/50.jpg)
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).
![Page 51: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/51.jpg)
Fusion Tables Layers
// define this outsidevar layer = null;
![Page 52: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/52.jpg)
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); } }); });
![Page 53: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/53.jpg)
Fusion Tables Layers
![Page 54: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/54.jpg)
Reference
https://developers.google.com/maps/documentation/javascript/3.exp/reference
![Page 55: Google Maps JS API](https://reader034.fdocuments.us/reader034/viewer/2022042518/53f920f08d7f729c2e8b4819/html5/thumbnails/55.jpg)
Google Maps JS APIAlberto Simões [email protected]