Transcription
Working with the Google Maps API – Javascript Version 3Daniel SheehanSenior GIS SpecialistMIT Librariesdsheehan@mit.edugishelp@mit.eduJanuary 25, 2013The Google Maps API makes it very easy for non programmers to add maps to their web pages withonly a small amount of programming. You can’t get around Javascript or HTML but the changes youneed to make for some basic maps is minimal. One of the biggest advantages of using the Maps API isaccess to Fusion tables. On their own, Fusion tables can easily be turned into maps. From the API youcan provide your audience with easy to access to data, including the ability to select subsets of your datato view.This workshop assumes a basic ability to read Javascript and an interest in learning to write a littleJavascript to create your maps. It also assumes an understanding of HTML and an interest in learningmore. After all, the title of this workshop is “Intergrating Map APIs into your website”. You will bemaking some maps, which can be saved in the T:\ drive on the machines in this lab.Basic resources to keep in mindThe main page for the Javascipt version of the API vascript/The tutorial (linked from above on/javascript/tutorial.htmlAnd the reference manual for the API (linked from above on/javascript/reference.htmlA couple of primers for http://www.w3schools.com/js/js intro.aspA sandbox for Javascript, if you are uncomfortable with filename tryjs introA primer for HTML:http://www.w3schools.com/html/1
And the GoogleAJAX API playground, which is a great way to see the available functionality accessiblethrough the me Exercises1)Modify Map.html. Add the following KML fileto the ta/CambridgeMedianValueHousing.kmlThe KML file is a polygon file representing median home prices in Cambridge with darker green showingthe more expensive areas and the lightest green representing the least expensive areas. This areacannot be queried in any meaningful way. Find the appropriate Zoom level and coordinates for thecenter of the map.2)Change the above map to a SATELLITE background and add a scale bar.3)Modify usionTable.html to refer to a sharedFusion table, which shows all airports, heliports, etc for New England:1F4OlmmtY9TGP9IgCBYeAZN5WSFvBDz4s5-IrqA or 419927You will want to select based on AIRPORT TYPE to HELIPORT. Use the LATITUDE field in the selectstatement – you always need to selection the location field. Find the appropriate Zoom level andcoordinates for the center of the map.What are the other columns in the table?4)Change the above map to have a TERRAIN background and add a scale.5)Create a Fusion Table of your own. Remove all default columns and add a latitude and longitude columnand a description column. Change the latitude field to type location and use a two column location (seenext page). Use Google Earth to find latitude and longitude locations of places (in decimal degree format– see next page) and add to your Fusion table. ddFusionTable.html to point to this fusion table. Youfind your table ID in the File, About This Table menu item.2
3
Some syntax for the above exercises:Querying a fusion table:new google.maps.FusionTablesLayer({query: {select: selection field, (always use the location field)from: table id,where: ‘where clause'}});var FusionLayer new google.maps.FusionTablesLayer({query: {select: 'Location',from: '1QTQ8YTFKpKnwdxs3zRmU-FolATWnBBTzvAoI8TA',where: 'Site MATCHES \'MIT Front Steps\''}});FusionLayer.setMap(map);Adding a KML file:google.maps.KmlLayer(‘URL of KML file',{options};Options :false}var cambridgeLayer idgeLayer.setMap(null); (to remove from map)4
Example maps from the les/ShowTwoImages.htmlPost workshop m?formkey dGo4TnBNSWlhWi1QOUM5UUJhdmdmcVE6MA5
4 Some syntax for the above exercises: Querying a fusion table: new google.maps.FusionTablesLayer({ query: { select: selection_field, (always use the location field) from: table_id, where: where_clause'} var FusionLayer new google.maps.FusionTablesLayer({
