Business Process Automation with Google App Engine and Google Data APIs
Integrating Google Map APIs into your website Using Google...
Transcript of Integrating Google Map APIs into your website Using Google...
![Page 1: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/1.jpg)
Integrating Google Map APIs
into your website Using
Google Fusion Tables
IAP 2013
http://libguides.mit.edu/gis Email: [email protected] Friday, January 25, 2013
![Page 2: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/2.jpg)
Editors
• On Windows, use Notepad or Wordpad
– In Notepad, be sure to save as type All Files (*.*) so you can save your files as *.html files
• On Macs, use TextWrangler from Bare Bones software (other editors may work):
http://www.barebones.com/products/textwrangler/
![Page 3: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/3.jpg)
Debugging
• Using Chrome, use the Developers Tools (under Tools)
• Using Firefox, use Firebug, which is a separate download
![Page 4: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/4.jpg)
Overview
• What is the Maps API?
• A basic map using the Maps API
• What are Fusion Tables?
• Adding a Fusion Table to your map
• Querying a Fusion Table
• Adding KML files to your map
![Page 5: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/5.jpg)
Overview
Feel free to follow along by copying code and manipulating it, if you have access to a fusion table or KML files, or simply to realign the simple map to a new area or map type.
![Page 6: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/6.jpg)
The Maps API
A collection of objects that allow users to embed maps on web pages using Google tools through a Javascript interface.
Free service for web sites open to the public.
You can have the basic Google Maps background and add your own data.
A Maps API key is available to track site usage.
![Page 7: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/7.jpg)
The Maps API
Javascript V3 • Javascript called from HTML • Need to be comfortable with Javascript, HTML • Maps are drawn on web page divisions (or div)
• Use the Google Tutorial: https://developers.google.com/maps/documentati
on/javascript/tutorial
![Page 8: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/8.jpg)
Some Javascript Hints
• Indents are not required but a useful for readability
• Capitalization is important
• Javascipt statements end with a semicolon (;)
• Variables are set with var statement and can be local to a function or global for the page
• A single function sets the map up
• Further functions can be used to let the user interact with the map
![Page 9: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/9.jpg)
A very simple map using the
Maps API
http://web.mit.edu/dsheehan/www/iap2013maps/SimpleMap.html
![Page 10: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/10.jpg)
A very simple map
function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new
google.maps.Map(document.getElementById("map_canvas"), mapOptions); } This includes only the function and not any of the needed HTML to put the map on the page
![Page 11: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/11.jpg)
Explaining the statements
var mapOptions = { center: new google.maps.LatLng42.359793, -71.092329), zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP };
• mapOptions is the variable • A map center is set using a LatLng variable (set
with numbers) • A zoom level is set (1 = world, 10 =
neighborhood) • A map type is set (options include TERRAIN,
SATELLITE)
![Page 12: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/12.jpg)
Explaining the statements
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
• map is the variable
• A map is added to the page element, or div, “map_canvas” – set in the HTML
• The mapOtions variable is used to set the map scale, or zoom level, the center of the map, and the map type
![Page 13: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/13.jpg)
<!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>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?&sensor=false"> # API key would go here
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.359793, -71.092329),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
![Page 14: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/14.jpg)
Add ons
• You can add a scale bar and a street view control, if it is relevant for your map:
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
StreetViewControl: true
};
![Page 15: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/15.jpg)
Fusion Tables
• Online, accessible data storage
• Mapping and charts are integrated
• Shareable
• Import from XLS(X) or CSV files
• Import shapefiles using http://shpescape.com/ (not officially supported)
• In Beta, still
![Page 16: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/16.jpg)
Visualize as table
• Edit columns, set column types (web link, location)
• Edit data
![Page 17: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/17.jpg)
Visualize as map
• Clickable points
• Modify style, information window
![Page 18: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/18.jpg)
Information to access to your
table through the API
![Page 19: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/19.jpg)
Code for adding Fusion Table
var FusionLayer = new google.maps.FusionTablesLayer("1QTQ8YTFKpKnwdxs3zRmU-FolATWnBBTzvAoI8TA", {suppressInfoWindows: false});
FusionLayer.setMap(map);
Where map = the variable representing the map
requested using the google.maps.Map function.
![Page 20: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/20.jpg)
Querying a Fusion Table
Syntax:
new google.maps.FusionTablesLayer({
query: {
select: selection_field, (always use the location field)
from: table_id,
where: ‘where_clause'}
});
![Page 21: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/21.jpg)
Querying a Fusion Table
var FusionLayer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1QTQ8YTFKpKnwdxs3zRmU-FolATWnBBTzvAoI8TA',
where: 'Site MATCHES \'MIT Front Steps\''}
});
FusionLayer.setMap(map);
Be careful with Strings within strings querying on a text field, use the “\” escape character to quote a strings to match the text field.
![Page 22: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/22.jpg)
Adding KML files
google.maps.KmlLayer(‘URL_of_KML_file',{options};
Options include:
{preserveViewport:true,suppressInfoWindows:false}
![Page 23: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/23.jpg)
Adding KML files
var cambridgeLayer = new google.maps.KmlLayer('http://web.mit.edu/dsheehan/www/iap2013maps/data/cambridgeArea.kml',{preserveViewport:true});
cambridgeLayer.setMap(map);
cambridgeLayer.setMap(null); (to remove from map)
![Page 24: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/24.jpg)
Some maps
• http://web.mit.edu/dsheehan/www/MapsAPIexamples/gcr.html
• http://web.mit.edu/dsheehan/www/MapsAPIexamples/ShowTwoImages.html
![Page 25: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/25.jpg)
MIT GIS Services
• Individual and classroom GIS support – MIT GIS Lab located in Rotch Library – Walk-in help during lab hours: project and teaching space – Email support through [email protected]
• General workshops • Access to GIS data: MIT Geodata Repository
– GeoWeb – ArcMap interface
• Loan GPS units to MIT community libguides.mit.edu/gis
![Page 26: Integrating Google Map APIs into your website Using Google ...libraries.mit.edu/files/gis/GoogleMapsAPIFusionTables.pdf · center: new google.maps.LatLng42.359793, -71.092329), zoom:](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f1395923c9b461f445cc309/html5/thumbnails/26.jpg)
Please take the survey
https://docs.google.com/spreadsheet/viewform?formkey=dGo4TnBNSWlhWi1QOUM5UUJhdmdmcVE6MA