1. (30 points) Create a Google Maps program to visualize a data set stored in a
ID: 3601904 • Letter: 1
Question
1. (30 points) Create a Google Maps program to visualize a data set stored in a Google
Fusion Table.
a. Implement your program in Google Maps JavaScript API.
b. Each row of the Fusion Table must contain one or two location column(s).
c. Each row of the Fusion Table must be displayed as a marker on the map.
d. When a user clicks on a maker, an information window shall be displayed,
showing at least two columns of data from that row.
e. You may use this example and this example as references.
2. Data. You may use the following Fusion Tables.
a. Geocoded Wikipedia articles
b. Northampton housing price
c. Atlanta Community Resources
But feel free to create your own Fusion Table with your own data. Make sure
your data includes latitude/longitude or street address. The Fusion Table you use
must be “Public” or “Anyone with the link can view”.
3. Your web page should be divided into two panels. One panel should show the
Google Map, the other show either the driving directions (see 4) or Google Street
View (see 5).
4. (40 points) Add a directions feature. Allow the user to get directions from an entered
address to a selected marker on the map.
a. Provide a “Get directions” button. The user can enter a street address in the
“Address” text field, and then click on one of the markers on the map. When
the user clicks on the “Get directions” button, the route between the two
addresses shall be displayed on the map.
b. (10 points out of the 40 points) Display the text directions on a side panel.
c. (5 points out of the 40 points) Add a button to turn on or off the display of
current traffic condition on the map.
d. If the user does not enter a street address or select a marker, display a
warning message.
e. Here is an example.
5. (20 points) Implement a spatial query feature. Allow the user to enter a street
address and search for information within certain distance (e.g. 3 miles, 10 miles,
…).
a. In your program, start with a default location and default search radius so
that.
b. There should be an “Address” textfield on the web page for the user to enter
the street address. There should be a drop down menu for the user to choose
different search radius (in miles).
c. If the search is successful, only the data within the selected distance of the
user entered address shall be displayed on the map.
d. Use the spatial query in the Google Fusion Table to get the data from the
Fusion Table. For simple Fusion Table queries, check out this article.
e. For Fusion Table spatial queries, check out this article.
f. You may use this sample as a reference.
6. (10 points) When a marker is clicked, the Google Street View for that location should
be displayed on the side panel.
a. You may use this sample as a reference.
7. (10 bonus points) In addition to the above features, implement a marker cluster in
your Google Maps program. Add a button in your web page to toggle the display of
marker clusters.
a. There are different marker clusters for Google Maps. Feel free to use any of
them. For example, a marker cluster library can be found at
https://github.com/googlemaps/js-marker- clusterer. Use this example as a
reference.
b. You cannot use google.maps.FusionTablesLayer and MarkerClusterer
together in the same program. The reason is that FusionTablesLayer uses
server side rendering, while MarkerCluster uses client side rendering. The
solution is to get the location column(s) from a Fusion Table, create markers
based on the latitude and longitude data, and then pass the markers to
MarkerClusterer.
The location columns are the columns that stores the geolocation information,
either in latitude/longitude pairs or full street addresses. If its a street
address, you can use Google Maps Geocoding service to convert it to
latitude/longitude. Here's an example.
There are two ways to get columns from a Fusion Table. The first is to use
the Google Fusion Tables API. The second is to use Google Chart Tools API
to read Fusion Table columns into a DataTable. Heres an example.
Explanation / Answer
Working with tables
Fusion Tables offers a way to easily create, modify, and visualize tables of data. You can import data in .csv or .kml and other file formats or create a table from scratch. In Fusion Tables, data is contained in a table resourcethat has various columns of data. You can use the API to manage the data columns and to customize the info windows and styles that are used when visualizing the data. A table resource specifies the columns and attributes associated with the table. All tables have a unique tableId that you use to manage the table and its columns, templates, and styles.
Retrieving a list of tables
Listing tables is useful because it provides the table ID and column names of tables that are necessary for other calls. You can retrieve the list of tables a user owns by sending an HTTP GET request to the URI with the following format:
https://www.googleapis.com/fusiontables/v1/tables
This list request does not include public tables or tables that have been shared with the user at any access level. By default, twenty-five results are returned. Use the maxResults parameter to change the number of results returned. Use the pageToken parameters to return additional pages of results.
Syntax
Request
Here is an example of requesting all tables an authenticated user owns:
GET https://www.googleapis.com/fusiontables/v1/tables
Let's say the user owns two tables: The first table has two columns and the second table has three columns. Each column is defined by its name and type. Each table also has a description parameter that further describes the contents of the table. The isExportable parameter is a boolean value that is set to true by default. You can set it to false to prevent others from exporting the table or accessing it through the API.
Response
If the request succeeds, the server responds with the 200 OK HTTP status code and the list of tables:
200 OK { "kind": "fusiontables#tableList", "items": [ { "kind": "fusiontables#table", "tableId": "1e7y6mtqv891111111111_aaaaaaaaa_CvWhg9gc", "name": "Insects", "columns": [ { "kind": "fusiontables#column", "columnId": 0, "name": "Species", "type": "STRING" }, { "kind": "fusiontables#column", "columnId": 1, "name": "Elevation", "type": "NUMBER" }, { "kind": "fusiontables#column", "columnId": 2, "name": "Year", "type": "DATETIME" } ], "description": "Insect tracking information.", "isExportable": true }, { "kind": "fusiontables#table", "tableId": "1e7y6mtqv892222222222_bbbbbbbbb_CvWhg9gc", "name": "Mammals", "columns": [ { "kind": "fusiontables#column", "columnId": 0, "name": "Group Size", "type": "NUMBER" }, { "kind": "fusiontables#column", "columnId": 1, "name": "Based In", "type": "LOCATION" }, ] "description": "Table monitoring mammals across the Western US.", "isExportable": true } ] }
Retrieving a table
You can retrieve a table by sending an HTTP GET request with its table ID to the URI with the following format:
https://www.googleapis.com/fusiontables/v1/tables/tableId
Syntax
Request
Here is an example requesting table with id 1e7y6mtqv891111111111_aaaaaaaaa_CvWhg9gc:
GET https://www.googleapis.com/fusiontables/v1/tables/1e7y6mtqv891111111111_aaaaaaaaa_CvWhg9gc
Response
If the request succeeds, the server responds with the 200 OK HTTP status code and the requested table:
200 OK { "kind": "fusiontables#table", "tableId": "1e7y6mtqv891111111111_aaaaaaaaa_CvWhg9gc", "name": "Insects, "columns": [ { "kind": "fusiontables#column", "columnId": 0, "name": "Species", "type": "STRING" }, { "kind": "fusiontables#column", "columnId": 1, "name": "Elevation", "type": "NUMBER" }, { "kind": "fusiontables#column", "columnId": 2, "name": "Year", "type": "DATETIME" } ], "description": "Insect Tracking Information.", "isExportable": true }
Creating a table
You can create a new base table by sending an authenticated HTTP POST request to the URI with the following format:
https://www.googleapis.com/fusiontables/v1/tables
When creating a new table, you must supply a representation of the new table as the message body. Note that for a new table:
Syntax
Request
Here is an example of a POST request that creates a new table with three columns:
POST https://www.googleapis.com/fusiontables/v1/tables Authorization: /* auth token here */ Content-Type: application/json { "name": "Insects", "columns": [ { "name": "Species", "type": "STRING" }, { "name": "Elevation", "type": "NUMBER" }, { "name": "Year", "type": "DATETIME" } ], "description": "Insect Tracking Information.", "isExportable": true }
Response
If the request succeeds, the server responds with the 200 OK HTTP status code and the new table data created. This request created a new table with tableId 1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc.
200 OK { "kind": "fusiontables#table", "tableId": "1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc", "name": "Insects", "columns": [ { "kind": "fusiontables#column", "columnId": 0, "name": "Species", "type": "STRING" }, { "kind": "fusiontables#column", "columnId": 1, "name": "Elevation", "type": "NUMBER" }, { "kind": "fusiontables#column", "columnId": 2, "name": "Year", "type": "DATETIME" } ], "description": "Insect Tracking Information.", "isExportable": true }
Updating a table
To update an existing table, follow these steps:
The URI for the Table Resource has the following format:
https://www.googleapis.com/fusiontables/v1/tables/tableId
Syntax
Request
Here is an example of updating table 1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc, which applies changes to the name and description of the table.
PUT https://www.googleapis.com/fusiontables/v1/tables Authorization: /* auth token here */ Content-Type: application/json { "name": "Insects of South America", "columns": [ { "kind": "fusiontables#column", "columnId": 0, "name": "Family", "type": "STRING" }, { "kind": "fusiontables#column", "columnId": 1, "name": "Approx Size of Group", "type": "NUMBER" }, { "kind": "fusiontables#column", "columnId": 2, "name": "Date of Eclosion", "type": "DATETIME" } ], "description": "The table tracks insects in Sth America only.", "isExportable": true }
Response
If the request succeeds, the server responds with a 200 OK status code and the full representation of the modified resource.
Deleting a table
To delete an existing table, send an authenticated DELETE HTTP request to the resource URI using the table's table ID. Tables may only be deleted by their owner.
The URI for the Table Resource has the following format:
https://www.googleapis.com/fusiontables/v1/tables/tableId
Syntax
Request
Here is an example that deletes the table created in the previous section. No body is required in the request.
DELETE https://www.googleapis.com/fusiontables/v1/tables/1e7y6mtqv891111111111_aaaaaaaaa_CvWhg9gc Authorization: /* auth token here */
Response
If the request succeeds, the server responds with a 204 No Content status code.
Copying a table
To copy a table, send an authenticated POST HTTP request to the following URI:
https://www.googleapis.com/fusiontables/v1/tables/tableId/copyYou must have permission to view the table, and the table must be exportable. This operation will copy the table schema, metadata, and rows.
Syntax
Request
Here is an example of a request to copy table 1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc:
POST https://www.googleapis.com/fusiontables/v1/tables/1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc/copy Authorization: /* auth token here */
Response
If the request succeeds, the server responds with the 200 OK HTTP status code and the definition of the copied table. This request created a new table with table with tableId ai378sk_jeidlckswe_ccccccccc_29d9Ika.
200 OK { "kind": "fusiontables#table", "tableId": "ai378sk_jeidlckswe_ccccccccc_29d9Ika", "name": "Copy of Insects", "columns": [ { "kind": "fusiontables#column", "columnId": 0, "name": "Species", "type": "STRING" }, { "kind": "fusiontables#column", "columnId": 1, "name": "Elevation", "type": "NUMBER" }, { "kind": "fusiontables#column", "columnId": 2, "name": "Year", "type": "DATETIME" } ], "description": "Copied at Tue Oct 16 14:54:29 PDT 2012 from http://www.google.com/fusiontables/DataSource?docid=1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc. Insect Tracking Information.", "isExportable": true }
Importing rows into a table
To import more rows into an existing table, send an authenticated POST HTTP request to the following URI (note the upload in the URI below):
https://www.googleapis.com/upload/fusiontables/v1/tables/tableId/importYou must supply the row data in the message body. The row data should be CSV formatted data, though you may specify alternative delimiters. See the reference documentation for more details.
Syntax
Request
Here is an example of importing more rows into table 1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc,
POST https://www.googleapis.com/fusiontables/v1/tables/1e7y6mtqv892233322222_bbbbbbbbb_CvWhg9gc/import Authorization: /* auth token here */ Content-Type: application/octet-stream Moth, 30, 2012 Grass Spider, 12.2, 2011
Response
If the request succeeds, the server responds with the 200 OK HTTP status code and the number of rows it received. Once the response is returned, the rows will be imported asynchronously in the background.
200 OK { "kind": "fusiontables#import", "numRowsReceived": "2" }
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.