Data Visualization Project: 1. Create a web page with four sections: A, B, C, an
ID: 3910246 • Letter: D
Question
Data Visualization Project:
1. Create a web page with four sections: A, B, C, and D. using html/javascript
2. (20 points) Section A should contain two input boxes: Address and Place.
a. In the “Address” box, a user can enter a street address, city, or a zip code.
b. In the “Place” search box, a user can enter the type or the name of a
business or place (e.g. restaurant, hotel, hospital, or Home Depot). Use
Google Places service to conduct the search around the address entered into
the “Address” box. and display the results in section B (Google Maps view).
c. There must be a button called “submit”.
3. (40 points) Section B should be a Google Maps view.
a. At the beginning, before a user enters anything and press the “submit” button
in section A, section B (Google Maps view) should visualize a data set stored
in a Google Fusion Table.
i. You may use the following Fusion Tables.
1. Geocoded Wikipedia articles
2. Northampton housing price
3. Atlanta Community Resources
4. Or 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”.
ii. Each row of the Fusion Table must contain one or two location
column(s).
iii. Each row of the Fusion Table must be displayed as a marker on the
map.
iv. When a user clicks on a maker, an information window shall be
displayed, showing at least two columns of data from that row.
b. Once a user enters information in the search boxes in section A and press the
submit button, the Google Maps view should center on the address entered in
the “Address” box in section A.
i. If no address is entered, then use the previous location.
c. The Google Maps view should display the places (or businesses) returned by
Google Places search based on the keywords entered in the “Place” search
box.
d. When a user selects a marker on the map, the driving directions from the
address in the “Address” box (in section A) to the location of the clicked
marker (e.g. a restaurant) should be displayed in section C. In the same time,
the Google Street View for the selected location should be displayed in
section D.
i. This applies to bother the Google Fusion Table markers and the
markers from Google Places search.
ii. If no address is entered, display a message asking user to enter an
address.
4. (20 points) Section C should display the driving direction from the user entered
address (in section A) to the user selected icon on the map (in section B).
5. (20 points) Section D should display the Google Street View of the selected marker.
6. Implement your program with Google Maps JavaScript API .
Explanation / Answer
Solved first four sub parts of the question
1. Create a web page with four sections: A, B, C, and D. using html/javascript
2. (20 points) Section A should contain two input boxes: Address and Place.
a. In the “Address” box, a user can enter a street address, city, or a zip code.
b. In the “Place” search box, a user can enter the type or the name of a
business or place (e.g. restaurant, hotel, hospital, or Home Depot). Use
Google Places service to conduct the search around the address entered into
the “Address” box. and display the results in section B (Google Maps view).
c. There must be a button called “submit”.
Code:
<html>
<head>
<style>
body{
background-color: green;
}
#container{
margin: 0 auto;
width:1200px;
height:600px;
background-color: #c6f3c6;
}
section{
float:left;
width:48%;
height: 280px;
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<section id="A">
Address: <input type="text" id="address" /><br />
Place: <input type="text" id="place" /><br />
<button id="submit">Submit</button>
</section>
<section id="B"></section>
<section id="C"></section>
<section id="D"></section>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.