Integrating Google Map APIs into your website Using Google...
Transcript of Integrating Google Map APIs into your website Using Google...
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