integrating google map apis into your website using google ... · pdf fileintegrating google...
TRANSCRIPT
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
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/
Debugging
• Using Chrome, use the Developers Tools (under Tools)
• Using Firefox, use Firebug, which is a separate download
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
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.
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.
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
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
A very simple map using the
Maps API
http://web.mit.edu/dsheehan/www/iap2013maps/SimpleMap.html
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
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)
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
<!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>
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
};
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
Visualize as table
• Edit columns, set column types (web link, location)
• Edit data
Visualize as map
• Clickable points
• Modify style, information window
Information to access to your
table through the API
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.
Querying a Fusion Table
Syntax:
new google.maps.FusionTablesLayer({
query: {
select: selection_field, (always use the location field)
from: table_id,
where: ‘where_clause'}
});
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.
Adding KML files
google.maps.KmlLayer(‘URL_of_KML_file',{options};
Options include:
{preserveViewport:true,suppressInfoWindows:false}
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)
Some maps
• http://web.mit.edu/dsheehan/www/MapsAPIexamples/gcr.html
• http://web.mit.edu/dsheehan/www/MapsAPIexamples/ShowTwoImages.html
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
Please take the survey
https://docs.google.com/spreadsheet/viewform?formkey=dGo4TnBNSWlhWi1QOUM5UUJhdmdmcVE6MA