1

Working with the Google Maps API – Javascript Version 3

Daniel Sheehan Senior GIS Specialist MIT Libraries dsheehan@mit.edu gishelp@mit.edu January 25, 2013

The Google Maps API makes it very easy for non programmers to add maps to their web pages with

only a small amount of programming. You can’t get around Javascript or HTML but the changes you

need to make for some basic maps is minimal. One of the biggest advantages of using the Maps API is

access to Fusion tables. On their own, Fusion tables can easily be turned into maps. From the API you

can provide your audience with easy to access to data, including the ability to select subsets of your data

to view.

This workshop assumes a basic ability to read Javascript and an interest in learning to write a little

Javascript to create your maps. It also assumes an understanding of HTML and an interest in learning

more. After all, the title of this workshop is “Intergrating Map APIs into your website”. You will be

making some maps, which can be saved in the T:\ drive on the machines in this lab.

Basic resources to keep in mind

The main page for the Javascipt version of the API :

http://code.google.com/apis/maps/documentation/javascript/

The tutorial (linked from above page):

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

And the reference manual for the API (linked from above page):

http://code.google.com/apis/maps/documentation/javascript/reference.html

A couple of primers for Javascript:

http://www.w3schools.com/js/default.asp http://www.w3schools.com/js/js_intro.asp

A sandbox for Javascript, if you are uncomfortable with programming:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro

A primer for HTML:

http://www.w3schools.com/html/

2

And the GoogleAJAX API playground, which is a great way to see the available functionality accessible

through the API:

http://code.google.com/apis/ajax/playground/

Some Exercises

1)

Modify http://web.mit.edu/dsheehan/www/iap2013maps/simpleMap.html. Add the following KML file

to the map:

http://web.mit.edu/dsheehan/www/iap2013maps/data/CambridgeMedianValueHousing.kml

The KML file is a polygon file representing median home prices in Cambridge with darker green showing

the more expensive areas and the lightest green representing the least expensive areas. This area

cannot be queried in any meaningful way. Find the appropriate Zoom level and coordinates for the

center of the map.

2)

Change the above map to a SATELLITE background and add a scale bar.

3)

Modify http://web.mit.edu/dsheehan/www/iap2013maps/QueryFusionTable.html to refer to a shared

Fusion table, which shows all airports, heliports, etc for New England:

1F4OlmmtY9TGP9IgCBYeAZN5WSFvBDz4s5-IrqA or 419927

You will want to select based on AIRPORT_TYPE to HELIPORT. Use the LATITUDE field in the select

statement – you always need to selection the location field. Find the appropriate Zoom level and

coordinates 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 column

and a description column. Change the latitude field to type location and use a two column location (see

next 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. Alter

http://web.mit.edu/dsheehan/www/iap2013maps/AddFusionTable.html to point to this fusion table. You

find your table ID in the File, About This Table menu item.

3

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({

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 include:

{preserveViewport:true,suppressInfoWindows:false}

var cambridgeLayer = new

google.maps.KmlLayer('http://web.mit.edu/dsheehan/www/iap2013maps/data/cambridgeArea.kml',{pr

eserveViewport:true});

cambridgeLayer.setMap(map);

cambridgeLayer.setMap(null); (to remove from map)

5

Example maps from the talk:

http://web.mit.edu/dsheehan/www/iap2013maps/SimpleMap.html

http://web.mit.edu/dsheehan/www/iap2013maps/QueryFusionTable.html

http://web.mit.edu/dsheehan/www/iap2013maps/AddFusionTable.html

http://web.mit.edu/dsheehan/www/iap2013maps/AddKMLfile.html

http://web.mit.edu/dsheehan/www/MapsAPIexamples/gcr.html

http://web.mit.edu/dsheehan/www/MapsAPIexamples/ShowTwoImages.html

Post workshop survey:

https://docs.google.com/spreadsheet/viewform?formkey=dGo4TnBNSWlhWi1QOUM5UUJhdmdmcVE6

MA