JavaScript In this project you will create an interactive map for a cycling club in Boulder, Colorado, allowing cyclists to view a map with directions between two popular cycling destinations. To complete this project, you will need to set up a Google Cloud account along with an API key to access the Google Maps, Directions Service, and Directions Renderer APIs. A preview of the completed page is shown in Figure 10-42. Do the following: 1. Use your code editor to open the project10-03_txt.html and project10-03_txt.js files from the js10 c project03 folder. Enter your name and the date in the comment section of each file and save them as project10-03.html and project10-03.js, respectively. 2. Go to the project10-03.html file in your code editor. Add a script element linked to the project10-03js file. Defer the loading of the script until after the page is loaded. 3. Add another script element with the following src attribute: https://maps.googleapis.com/maps/ api/js?key=key&callback=showMap where key is your Google Maps API key. Also defer this script until after the page is loaded. 4. Close the file, saving your changes and then go to the project10-03.js file in your code editor. Steps 5 through 10 should all be down within the showMap() function. Several variables have already been declared for you. 5. Use the new google.maps.DirectionsService() object constructor to create a DirectionsService object named bikeFind. 6. Use the new google.maps.DirectionsRenderer() object constructor to create a DirectionsRenderer object named bikeDraw. 7. Create a LatLng object named Boulder storing within it a latitude of 40.01753 and a longitude of -105.26496. 8. Use the new google.maps.Map() object constructor to instantiate a new Google map named myMap. Set the zoom level to 12 and center the map on Boulder. 9. Create event listeners for the startingPoint and endingPoint selection lists, running the drawRoute() function in response to the change event. 10. Create the drawRoute() function. Within the function insert an if statement that tests whether the selected index for the startingPoint and endingPoint selection lists are both not equal to 0. If true, then do the following: a. Define a route object named bikeRoute with an origin at startingPoint.value and a destination at endingPoint.value. Set the travelMode option to BICYCLING. b. Apply the route() method to the bikeFind object generating directions between the starting and ending points. If the status of the request is OK then (i) apply the setDirections() method to bikeDraw object request directions from the directions service, (ii) apply the setMap() method to bikeDraw to display the route within myMap, and (iii) apply the setPanel() method to bikeDraw to display the turnby-turn directions within the bikeDirections object. If the status is not OK then change the text content of the bikeDirections object to Directions Unavailable: status. 11. Save your changes to the file and then load project10-03.

1. JavaScript
In this project you will create an interactive map for a cycling club in Boulder, Colorado,
allowing cyclists to view a map with directions between two popular cycling destinations. To
complete this project, you will need to set up a Google Cloud account along with an API key to
access the Google Maps, Directions Service, and Directions Renderer APIs. A preview of the
completed page is shown in Figure 10-42.
Do the following:
1. Use your code editor to open the project10-03_txt.html and project10-03_txt.js files from the
js10 c
project03 folder. Enter your name and the date in the comment section of each file and save them
as
project10-03.html and project10-03.js, respectively.
2. Go to the project10-03.html file in your code editor. Add a script element linked to the
project10-03js file.
Defer the loading of the script until after the page is loaded.
3. Add another script element with the following src attribute:
https://maps.googleapis.com/maps/
api/js?key=key&callback=showMap where key is your Google Maps API key. Also defer this
script until
after the page is loaded.
4. Close the file, saving your changes and then go to the project10-03.js file in your code editor.
Steps 5
through 10 should all be down within the showMap() function. Several variables have already
been
declared for you.
5. Use the new google.maps.DirectionsService() object constructor to create a DirectionsService
object named bikeFind.
6. Use the new google.maps.DirectionsRenderer() object constructor to create a
DirectionsRenderer object named bikeDraw.
7. Create a LatLng object named Boulder storing within it a latitude of 40.01753 and a longitude
of
-105.26496.
8. Use the new google.maps.Map() object constructor to instantiate a new Google map named
myMap. Set the
zoom level to 12 and center the map on Boulder.

2. 9. Create event listeners for the startingPoint and endingPoint selection lists, running the
drawRoute()
function in response to the change event.
10. Create the drawRoute() function. Within the function insert an if statement that tests whether
the selected index for the startingPoint and endingPoint selection lists are both not equal to 0. If
true, then do the
following:
a. Define a route object named bikeRoute with an origin at startingPoint.value and a destination
at
endingPoint.value. Set the travelMode option to BICYCLING.
b. Apply the route() method to the bikeFind object generating directions between the starting and
ending
points. If the status of the request is OK then (i) apply the setDirections() method to bikeDraw
object request directions from the directions service, (ii) apply the setMap() method to bikeDraw
to
display the route within myMap, and (iii) apply the setPanel() method to bikeDraw to display the
turnby-turn directions within the bikeDirections object. If the status is not OK then change the
text content of the bikeDirections object to Directions
Unavailable: status.
11. Save your changes to the file and then load project10-03.html in your browser. Verify that a
map of Boulder,Colorado appears in the left box. Verify that when you select starting and ending
points from the two list boxes,a route is drawn on the map and turn-by-turn directions are
provided between the two points.
Filename: project10-3.html
Hands-on Project 10-3
Hands-on Project 10-3
Boulder Cycling Routes
Choose an origin and a destination of your cycling outingStarting PointFolsom FieldNCAREben
G. Fine ParkEldorado SpringsValmont Bike ParkKossler LakeRocky FlatsFoothills
ParkJamestownEnding PointFolsom FieldNCAREben G. Fine ParkEldorado SpringsValmont
Bike ParkKossler LakeRocky FlatsFoothills ParkJamestown
--------------------------------------------------------------------------------------------
Filename: project10-03.js
"use strict";

3. /* JavaScript 7th Edition
Chapter 10
Project 10-03
Boulder Cycling Directions
Author:
Date:
Filename: project10-03.js
*/
function showMap() {
// Page objects
let bikeMap = document.getElementById("bikeMap");
let bikeDirections = document.getElementById("bikeDirections");
let startingPoint = document.getElementById("startingPoint");
let endingPoint = document.getElementById("endingPoint");
}
--------------------------------------------------------------
Filename: styles.css
/* JavaScript 7th Edition
Chapter 10
Hands-on Project 10-3
Style sheet Boulder Cycling Directions
Filename: styles.css
*/
/* apply a natural box layout model to all elements */
* {
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,

4. del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
width: 1024px;
background: #F5F5F5;
margin: 0 auto;
font-family: Georgia, "Droid Serif", serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,

5. q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
line-height: 1;
width: 960px;
background: white;
margin: 0 auto;
font-family: Verdana, Geneva, sans-serif;
}
ol, ul {
list-style: none;
}
/* page header */
header {
background: #5472B2;
width: 100%;
color: #FFFFFF;
font-size: 48px;
text-align: center;
line-height: 1.5em;
margin-bottom: 0;
}
/*-------------------- Project Styles ------------------*/
section {
background-color: #FFDB70;
margin-top: 0;
padding-bottom: 20px;
user-select:none;
height: 640px;

6. }
section h1 {
font-size: 2.8em;
text-align: center;
margin: 0;
padding: 20px 0 10px 0;
}
section p {
width: 800px;
margin: 0 auto;
font-size: 1.2em;
line-height: 1.3;
text-align: center;
}
fieldset {
width: 90%;
margin: 10px auto;
position: relative;
display: block;
height: 185px;
}
fieldset select#startingPoint {
position: absolute;
top: 0;
left: 220px;
width: 180px;
}
fieldset select#endingPoint {
position: absolute;
top: 0;
left: 460px;
width: 180px;
}
div#bikeMap {
width: 400px;
height: 300px;

7. border: 3px solid gray;
margin: 0 15px 0 70px;
float: left;
}
div#bikeDirections {
width: 400px;
height: 300px;
border: 3px solid gray;
margin: 0 30px 0 0;
float: left;
overflow: scroll;
}
select option:first-of-type {
font-size: 1.3em;
padding-bottom: 5px;
font-weight: bold;
} Boulder Cycling Routes Figure 10-42 Completed Project 10-3