Step By Step Geolocation
Day 1
Project Overview

The purpose of this step-by-step project is for you to see how the geolocation element of HTML5 works. Geolocation is tied closely with Google's Map software. All the user needs to do is to select a restaurant's address from a list. After clicking a search button, which invokes a javaScript function, the location is shown to the user on a map. The application you will be developing is a restaurant finder GPS program for fast food restaurants in your geographical area. The application is also designed to show the user his or her location using longitude and latitude. There is also a link to the selected restaurant's FaceBook page. The project takes approximately 2 weeks (10 hours) to complete. The main page which contains the data for burgers is completed. You will get copies of the files that make up the project to make it function properly. In addition, you will compile the data for the other types of fast food restaurants: Mexican, Italian, Chinese, etc. The home page along with the other pages features a scrolling banner with various fast food choices.


Planning

Even though the project is all ready laid out for you, it would be a good idea to look at the planning stages of this project so that you can apply this knowledge to projects of your own creation.

Flexible box model template

  1. First, start our with the flexible box model template for the html part of the project. It features flexible boxes for the article or main section, the side box a navigational box as well as a header and a footer.
  2. Decide what goes in each section of the template.
  3. The header
    • The title of the application: Looking for Fast Food
    • A graphic featuring a place setting
    • A scrolling banner with all types of fast foods
  4. The footer: I used a picture of a chef and repeated it horizontally numerous times. I also changed the opacity or transparency of the images.
  5. The Article - Main Section of Page.
    • Included in this section is a picture of a hamburger
    • Instruction on how to use the program
    • A drop-down list with the addresses of local burger places.
    • A map of the world
    • A search button.
  6. Navigation section- Food Types.
    • Burgers
    • Pizza
    • Chinese
    • Chicken
    • Italian
    • Mexican
    • Sandwiches
  7. Aside - Side News
    • Current Location
    • Image of different types of food
    • Link to Facebook page for each restaurant.
Color Scheme

Decide on a color scheme for the header, footer, article, aside, navigation and borders for each. RGB - red, green blue was used in this example. You can also use hex-decimal numbers to represent the colors or in some case the name of the color.


Wikipeia RGB colors

Click on link to see the how the program works.
Video on how program works
Fast Food Restaurant Finder


Day 2
Materials, Files and Pictures Needed

You need a number of things before beginning this project. You will need the following items.

  1. Names, addresses and FaceBook URLs for the following restaurants.
    • Pizza take out restaurants
    • Fast food chicken restaurants
    • Chinese take out restaurants
    • Italian take out restaurants
    • Mexican take out restaurants
    • Sandwich shops
  2. You will need the following files that are in the textareas to the right
    • fast.html-Figure 2
    • fast.css-Figure 3
    • food.js- Figure 4
    • cyclePictures.js-Figure 5
    • map2.js-Figure 6
    • curLocation.js- Figure 7

You will need the following pictures

Hover over the picture to see the file name you should use when saving the picture.


PicturePicture

How to get copies of the picture files
  1. Hover over each image to get the file name you should use.
  2. Right-click each picture in the table above.
  3. Save image as
  4. Select the folder being used to store this project
  5. Use the name of the file listed when you hover over each image.
  6. Continue until all pictures have been saved into your folder.

Video on how to get copies of pictures needed for project .

How to get copies of all six files needed for the project.
  1. Select all of the text in the textarea box.
  2. Put it on the clipboard - CRTL+C for copy.
  3. Open Notepad++.
  4. Select New File.
  5. Paste the information from the clipboard into the new file.
  6. Save the file using the name of the file listed below each batch of code.
  7. Remember case matters. See files names to use below.
    • fast.html - Figure 2
    • fast.css - Figure 3
    • cyclePictures.js - Figure 4
    • food.js - Figure 5
    • map2.js - Figure 6
    • curLocation.js - Figure 7


Video on needed files for project .
Video on how to get files for project .

Day 3
Teacher Responsibilities

The teacher needs to make certain that the students' computers have Notepad++ and Google's Chrome installed as a browser. The other browsers such as Internet Explorer and Mozilla's FireFox will work nicely too.

The teacher needs to verify that certain parts of the project are completed and that the software performs as it was designed.

There is a sign off worksheet that should be completed to come up with the student's grades. Checkoff the required material each day on the worksheet.


Work sheet for this project
Day 4
Picture banner

The way the banner currently cycles pictures is by first all the burgers, next all the pizza, and so on. Change the order of the cycling pictures so that they are mixed up and not all the same food category clumped together. Follow these steps

  1. First load the cyclePictures.js file into Notepad ++.
  2. Examine the code. There a total of 31 pictures in the array.
  3. They are numbered 0 through 30.
  4. All you have to do is change the index number of the picture files
  5. The index of the files resides between the square brackets, [].
  6. For example the picture in the array item 3 is called pizza.jpg
  7. To change the where the picture appears, just change its index number.
  8. View the video for a complete explanation.
Video on changing the order of pictures in the cycling banner

Day 5
Making the pizza.html page

The file called fast.html will be our template for all of the food type pages. Each page is almost identical. There are only a few changes that need to be made. Complete the following steps to create the new page.


  1. Load fast.html into Notepad++
  2. Save it as pizza.html
  3. Line 7 contains the link to a file called food.js: <script src="food.js"></script>
  4. Replace the word food with pizza
  5. Save file as pizza.html.
  6. Find line 52 and change the name of the picture file to pizza.jpg. The line should read<img src="pizza.jpg" height=200 width=200 border=3>
  7. Change line 56 to read<H2>Pizza Fast<br> Food Restaurants</H2>
  8. Change line 59 to read<li>Click down arrow for a list of pizza restaurants.
  9. Lines 69-76 are where the names and addresses of our restaurants are located.
  10. We want to change the names of the burger restaurants and their addresses to pizza restaurants and their addresses that are located near you.
  11. For example, the first burger fast food restaurant in our option list is: <option>McDonald's 6900 Marketplace Goleta</option>
  12. Replace name, address and city with a pizza restaurant in your city.
  13. Continue making changes to lines 69-76.
  14. Save file.
  15. Launch your new pizza file using a browser and make certain the all corrections have been made.

Video on making the fast food page for pizza restaurants

Linking pizza.html to javaScript pizza file

We need to create another file for each type of restaurant. We already have one for our burger page. It is called food.js We should have already make a link to our soon to be created pizza.js file in line 7 of the pizza.html file.


Changing the javaScript food file
  1. Load the file called food.js into Notepad++
  2. This file picks up the address clicked on from the HTML5 page.
  3. This is the information needed to search the map for the location of our restaurant.
  4. These addresses should exactly match the ones in our list on the HTML5 page
  5. The lines that need to be changed are: 16, 23, 27, 32, 37, 43, 51, 56.
  6. Make these changes by replacing the burger addresses with your addresses for each pizza restaurant.
  7. Save your file calling it pizza.js

Video on making the javaScript file for pizza restaurants

Making a link to Face Book page for each restaurant

In your pizza.html there a function that holds all the Face Book urls. Follow these steps.

  1. First sign into your FaceBook account.
  2. Click the Search icon
  3. Type in the name of the pizza restaurant you want to link. The first one in your list should be line 69
  4. When you see the link for that particular restaurant, right-click and copy url to the clipboard.
  5. Return to your pizza.html file in Notepad++
  6. We are going to replace the url in line 189.
  7. Delete the text between the quotation marks and paste in the new pizza url. Use either CTRL + V or right-click and paste in the information.
  8. Continue the process replacing the pizza restaurant's Facebook URL with the burger ones.
  9. Replace the URL for lines 197,203,209,214,219,224,231 and 237.
  10. Save your file.

Testing your application
  1. First, from your pizza.html page, select a restaurant.
  2. Click the search button to see if the proper location is displayed.
  3. Zoom in to see the actual location.
  4. Click Find Current Location to see your longitude and latitude. If this function does not work, try a different browser. Some Browsers like Chrome did not seem to work unless the file was uploaded to the Internet.
  5. Click on the FaceBook link to see if that page loads.
  6. The FaceBook page for that restaurant. It should load that page.
  7. Repeat these steps for each restaurant in your drop-down list.
  8. Make any corrections needed in either the pizza.html file or the pizza.js file.


Ask your instructor if they want you to continue with pages for the other restaurants:Chinese, Italian, Mexican, chicken and sandwiches. The process for completing these pages is identical to the procedures listed above for Day 5. The videos also show you how to do the assignment.
Listed by day and restaurant type are a series of tables that show what file to use, what line and the data that should be changed


Day 6
Making the Chinese fast food pages
File name to load = fast.html
File name to save as chinese.html
Line NumberCode
7<script src="chinese.js"></script>
52<img src="chinese1.jpg" height=200 width=200 border=3;>
56<H2>Chinese Fast<br> Food Restaurants</H2>
59<LI>Click down arrow for a list of Chinese restaurants
69<option>Name address and city of Chinese fast food restaurant</option>
69<option>Name address and city of Chinese fast food restaurant</option>
70<option>Name address and city of Chinese fast food restaurant</option>
71<option>Name address and city of Chinese fast food restaurant</option>
72<option>Name address and city of Chinese fast food restaurant</option>
73<option>Name address and city of Chinese fast food restaurant</option>
74<option>Name address and city of Chinese fast food restaurant</option>
75<option>Name address and city of Chinese fast food restaurant</option>
76<option>Name address and city of Chinese fast food restaurant</option>
Facebook codes
189var result = str.link("Facebook URL Link");
197var result = str.link("Facebook URL Link");
203var result = str.link("Facebook URL Link");
209var result = str.link("Facebook URL Link");
214var result = str.link("Facebook URL Link");
219var result = str.link("Facebook URL Link");
224var result = str.link("Facebook URL Link");
231var result = str.link("Facebook URL Link");
237var result = str.link("Facebook URL Link");

File name to load = food.js
File name to save as chinese.js
Line NumberCode
16document.feedbackForm.opinion.value = "restaurant address and city";
23document.feedbackForm.opinion.value = "restaurant address and city";
27document.feedbackForm.opinion.value = "restaurant address and city";
32document.feedbackForm.opinion.value = "restaurant address and city";
37document.feedbackForm.opinion.value = "restaurant address and city";
43document.feedbackForm.opinion.value = "restaurant address and city";
51document.feedbackForm.opinion.value = "restaurant address and city";
56document.feedbackForm.opinion.value = "restaurant address and city";


Day 7

Making the Italian fast food pages
File name to load = fast.html
File name to save as italian.html
Line NumberCode
7<script src="italian.js"></script>
52<img src="italian1.jpg" height=200 width=200 border=3;>
56<H2>Italian Fast<br> Food Restaurants</H2>
59<LI>Click down arrow for a list of Italian restaurants
69<option>Name address and city of Italian fast food restaurant</option>
69<option>Name address and city of Italian fast food restaurant</option>
70<option>Name address and city of Italian fast food restaurant</option>
71<option>Name address and city of Italian fast food restaurant</option>
72<option>Name address and city of Italian fast food restaurant</option>
73<option>Name address and city of Italian fast food restaurant</option>
74<option>Name address and city of Italian fast food restaurant</option>
75<option>Name address and city of Italian fast food restaurant</option>
76<option>Name address and city of Italian fast food restaurant</option>
Facebook codes
189var result = str.link("Facebook URL Link");
197var result = str.link("Facebook URL Link");
203var result = str.link("Facebook URL Link");
209var result = str.link("Facebook URL Link");
214var result = str.link("Facebook URL Link");
219var result = str.link("Facebook URL Link");
224var result = str.link("Facebook URL Link");
231var result = str.link("Facebook URL Link");
237var result = str.link("Facebook URL Link");

File name to load = food.js
File name to save as italian.js
Line NumberCode
16document.feedbackForm.opinion.value = "restaurant address and city";
23document.feedbackForm.opinion.value = "restaurant address and city";
27document.feedbackForm.opinion.value = "restaurant address and city";
32document.feedbackForm.opinion.value = "restaurant address and city";
37document.feedbackForm.opinion.value = "restaurant address and city";
43document.feedbackForm.opinion.value = "restaurant address and city";
51document.feedbackForm.opinion.value = "restaurant address and city";
56document.feedbackForm.opinion.value = "restaurant address and city";
Day 8


Making the Mexican fast food pages
File name to load = fast.html
File name to save as mexican.html
Line NumberCode
7<script src="mexican.js"></script>
52<img src="taco1.jpg" height=200 width=200 border=3;>
56<H2>Mexican Fast<br> Food Restaurants</H2>
59<LI>Click down arrow for a list of Mexican restaurants
69<option>Name address and city of Mexican fast food restaurant</option>
69<option>Name address and city of Mexican fast food restaurant</option>
70<option>Name address and city of Mexican fast food restaurant</option>
71<option>Name address and city of Mexican fast food restaurant</option>
72<option>Name address and city of Mexican fast food restaurant</option>
73<option>Name address and city of Mexican fast food restaurant</option>
74<option>Name address and city of Mexican fast food restaurant</option>
75<option>Name address and city of Mexican fast food restaurant</option>
76<option>Name address and city of Mexican fast food restaurant</option>
Facebook codes
189var result = str.link("Facebook URL Link");
197var result = str.link("Facebook URL Link");
203var result = str.link("Facebook URL Link");
209var result = str.link("Facebook URL Link");
214var result = str.link("Facebook URL Link");
219var result = str.link("Facebook URL Link");
224var result = str.link("Facebook URL Link");
231var result = str.link("Facebook URL Link");
237var result = str.link("Facebook URL Link");

File name to load = food.js
File name to save as mexican.js
Line NumberCode
16document.feedbackForm.opinion.value = "restaurant address and city";
23document.feedbackForm.opinion.value = "restaurant address and city";
27document.feedbackForm.opinion.value = "restaurant address and city";
32document.feedbackForm.opinion.value = "restaurant address and city";
37document.feedbackForm.opinion.value = "restaurant address and city";
43document.feedbackForm.opinion.value = "restaurant address and city";
51document.feedbackForm.opinion.value = "restaurant address and city";
56document.feedbackForm.opinion.value = "restaurant address and city";
Day 9


Making the chicken fast food pages
File name to load = fast.html
File name to save as chicken.html
Line NumberCode
7<script src="chicken.js"></script>
52<img src="chicken1.jpg" height=200 width=200 border=3;>
56<H2>Chicken Fast<br> Food Restaurants</H2>
59<LI>Click down arrow for a list of Chicken restaurants
69<option>Name address and city of Chicken fast food restaurant</option>
69<option>Name address and city of Chicken fast food restaurant</option>
70<option>Name address and city of Chicken fast food restaurant</option>
71<option>Name address and city of Chicken fast food restaurant</option>
72<option>Name address and city of Chicken fast food restaurant</option>
73<option>Name address and city of Chicken fast food restaurant</option>
74<option>Name address and city of Chicken fast food restaurant</option>
75<option>Name address and city of Chicken fast food restaurant</option>
76<option>Name address and city of Chicken fast food restaurant</option>
Facebook codes
189var result = str.link("Facebook URL Link");
197var result = str.link("Facebook URL Link");
203var result = str.link("Facebook URL Link");
209var result = str.link("Facebook URL Link");
214var result = str.link("Facebook URL Link");
219var result = str.link("Facebook URL Link");
224var result = str.link("Facebook URL Link");
231var result = str.link("Facebook URL Link");
237var result = str.link("Facebook URL Link");

File name to load = food.js
File name to save as chicken.js
Line NumberCode
16document.feedbackForm.opinion.value = "restaurant address and city";
23document.feedbackForm.opinion.value = "restaurant address and city";
27document.feedbackForm.opinion.value = "restaurant address and city";
32document.feedbackForm.opinion.value = "restaurant address and city";
37document.feedbackForm.opinion.value = "restaurant address and city";
43document.feedbackForm.opinion.value = "restaurant address and city";
51document.feedbackForm.opinion.value = "restaurant address and city";
56document.feedbackForm.opinion.value = "restaurant address and city";
Day 10


Making the sandwich fast food pages
File name to load = fast.html
File name to save as sandwich.html
Line NumberCode
7<script src="sandwich.js"></script>
52<img src="sandwich1.jpg" height=200 width=200 border=3;>
56<H2>Sandwich Fast<br> Food Restaurants</H2>
59<LI>Click down arrow for a list of Sandwich restaurants
69<option>Name address and city of Sandwich fast food restaurant</option>
69<option>Name address and city of Sandwich fast food restaurant</option>
70<option>Name address and city of Sandwich fast food restaurant</option>
71<option>Name address and city of Sandwich fast food restaurant</option>
72<option>Name address and city of Sandwich fast food restaurant</option>
73<option>Name address and city of Sandwich fast food restaurant</option>
74<option>Name address and city of Sandwich fast food restaurant</option>
75<option>Name address and city of Sandwich fast food restaurant</option>
76<option>Name address and city of Sandwich fast food restaurant</option>
Facebook codes
189var result = str.link("Facebook URL Link");
197var result = str.link("Facebook URL Link");
203var result = str.link("Facebook URL Link");
209var result = str.link("Facebook URL Link");
214var result = str.link("Facebook URL Link");
219var result = str.link("Facebook URL Link");
224var result = str.link("Facebook URL Link");
231var result = str.link("Facebook URL Link");
237var result = str.link("Facebook URL Link");

File name to load = food.js
File name to save as sandwich.js
Line NumberCode
16document.feedbackForm.opinion.value = "restaurant address and city";
23document.feedbackForm.opinion.value = "restaurant address and city";
27document.feedbackForm.opinion.value = "restaurant address and city";
32document.feedbackForm.opinion.value = "restaurant address and city";
37document.feedbackForm.opinion.value = "restaurant address and city";
43document.feedbackForm.opinion.value = "restaurant address and city";
51document.feedbackForm.opinion.value = "restaurant address and city";
56document.feedbackForm.opinion.value = "restaurant address and city";