Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Programming Assignment #7: Google Map for Places to Eat50 points

Due Tuesday, March 19 @ 11:55pm


You'll be editing your Insider's Guide to plot your places to eat on a Google map. The points, when clicked, will display an information box that contains some information about the eatery and a link to it.

Steps to Complete the Assignment

  1. In VS Code, be sure you are on the master branch of your Insider's Guide assignment. Perform a sync in the lower left corner by clicking the "two arrows in a circle" button. Sync your master branch Then add a new branch called pa7.
  2. Develop a GeoJSON file that maps your five "best places to eat" around the city. You can follow the basic model in this file — https://jasontmickel.com/dci110/assignments/pa7/jason.json — however, note that the steps below request additional properties that are not in my file. You will need to adapt it to fit the instructions.
    1. Each of the five points should use the following fields under properties:
      1. name: Set a point's name to the name of the business.
      2. description: Use proper HTML to write a paragraph about the eatery and why it's on your top places list
      3. hours: Use proper HTML to build a small table representing their hours. If the hours vary by season, use hours that are current to your work on the assignment.
      4. menu: Use proper HTML to build an ordered list of your favorite three things on their menu (entrees, appetizers, flavors of ice cream, etc.).
      5. icon: A string URL to an icon WITHOUT <a href="...">. The icon should be a symbol that represents the type of eatery (i.e., sandwich for small food, knife and fork for dinner, ice cream cone, etc.). To receive credit, you must change the icon from the default "upside down teardrop". Use absolute URLs so you don't have to download the images. The images must be small enough so that the icons do not take over the entire map.
      6. weblink: A string URL WITHOUT <a href="..."> to the business's website. If they do not have one, link to a website where they are listed (like a local chamber of commerce or tourism site).
  3. Edit your original index.html file. Replace the table within your "Best Places to Eat" section with a Google Map. Add a div with the id "map" and the script block to load the Google Maps API. Then add another new script block with the src attribute pointing to a new JavaScript file called "map.js".
  4. Edit your "style.css" file to set the height of #map div to a fixed value (not 100%). Experiment with different heights to have the map fit within your browser window properly.
  5. Create a new file called map.js that contains the JavaScript to generate the map. Your map should:
    1. Start out centered over your city/area and set to a zoom level that allows all of your eateries to be visible upon loading.
    2. Load the GeoJSON file automatically.
    3. Reveal an infobox when each marker when clicked with the following information in this order:
      1. The name property displayed inside an h2 element
      2. The description
      3. The hours
      4. An h3 with the phrase "Things to order" followed by your menu of three favorite items
      5. The web link placed within the href attribute of an a element. The text of the link should read "Visit their website", and clicking the link should open it in a new tab.
    4. Add the following bit of code, exactly as shown below, inside and at the bottom of your initMap function. This code makes the GeoJSON icons load properly:
      map.data.setStyle(function(feature) {
          return {icon: feature.getProperty('icon')};
  6. Test everything! Make sure markers are in the right places, that infobox popups work, that links work, etc.
  7. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa7 branch into the master branch. Please DO NOT delete the pa7 branch when finished.


HTML, CSS, and JavaScript should be properly formatted following their respective coding conventions discussed in class.

You can use the live preview extension in VSCode to test the page as you're building (click Preview Available in the lower left of the VSCode window), but when you're finished, be sure to check the live URL at https://dci110w19.github.io/insiders-YOURUSERNAME/ (e.g. "https://dci110w19.github.io/insiders-mickelj/") to see that it is completely uploaded and working.

Your updated page should look similar to this:

Sample image for how the results of PA 7 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML, CSS, JavaScript, and GeoJSON coding rules and conventions discussed in class and in the textbook

The lab will begin with a full score of 50 points and deductions will be made according to the amount and severity of errors.