Original Document with links can be found here:

https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxnc3VkYXRhdmlzfGd4OjNkODEyOTI5NGExOWIzODk

Requirements:

1.(30 points) Create a Google Maps program to visualize a data set stored in a Google Fusion Table.

Implement your program in Google Maps JavaScript API.

Each row of the Fusion Table must contain one or two location column(s).

Each row of the Fusion Table must be displayed as a marker on the map.

When a user clicks on a maker, an information window shall be displayed, showing at least two columns of data from that row.

You may use this example and this example as references.

Data. You may use the following Fusion Tables.

Geocoded Wikipedia articles

Northampton housing price

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.

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).

2. (40 points) Add a directions feature. Allow the user to get directions from an entered address to a selected marker on the map.

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.

(10 points out of the 40 points) Display the text directions on a side panel.

(5 points out of the 40 points) Add a button to turn on or off the display of current traffic condition on the map.

If the user does not enter a street address or select a marker, display a warning message.

Here is an example.

(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, ).

In your program, start with a default location and default search radius so that.

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).

If the search is successful, only the data within the selected distance of the user entered address shall be displayed on the map.

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.

For Fusion Table spatial queries, check out this article.

You may use this sample as a reference.

(10 points) When a marker is clicked, the Google Street View for that location should be displayed on the side panel.

You may use this sample as a reference.

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

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.

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 it's 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. Here's an example