Web Design Lab #4: Map Maker

This lab is based on the Google Maps Tutorial.

The purpose of this lab is to extend upon the basics of what we can do with maps to build something useful, namely the ablity to:

  1. Dynamically Build a Path (a connected line of points)
  2. Measure its Distance
  3. Save the Path
  4. Edit the Path

Project Description

Create a NEW page called 'lab4_gmap_line.php' and then do the following:
  1. Building the Path
    1. Make it so that the 'dots' (markers) connect by integrating code from here into your program
    2. Be sure to set your line to EDITABLE so that you can move placed points around
    3. Refer to here for additional guidance
  2. Measuring Distance
    • Make it so that each time your line changes, the distance of the path is remeasured
    • Show the distance in a new DIV layer that you place somewhere over the map
    • Refer to here for some inspiration
  3. Save the Path
    • Add a SAVE button to the DIV that shows distance
    • You will want to convert the polyline path to JSON - see here
    • Algorithm Idea: Create a hidden form/textarea. When the save button is hit, place the JSON version of the LatLng values of the path into the textarea, then, via Javascript, use 'form'.submit() to submit the form (create a new page for the handling of saving the file - see below.)
    • For now (keeping things 'simpler') - simply save it to a file "points.txt"
    • Build a LOAD function so that you can load an existing map via 'lab5_gmap_line.php?show=existing' (This should open 'points.txt', parse the JSON, and build the line)
  4. Edit the Path
    In Part 1, you made the line editable which enables the moving of points. Now:
    • Make it so that points can be deleted
    • The path should dynamically update how it appears (the path of the line) and the distance