The first example creates a Google map from a set of points listed in a data file. When clicked, the markers open a window with an image and some html code that could link to another html page. Here's an example of the opening screen with three points:
The map is centered on the Amherst campus and displayed at zoom level 1. When a marker is clicked, a popup windows appears at the marker as shown below:
If the hyperlink in the popup is clicked, the user is taken to a different web page. A live link to this map is http://www.amherst.edu/~jkprice/googlemaps/googlemap1.php.
The code consists of five sections:
- The header code, which contains the Google maps key
Here's the code, divided into those five sections. Things highlighted in yellow are easily modified. In fact the first long string of random characters and digits must be changed.
The associated data file, called points looks like this:
-72.51479476690292 | 42.371391907618545 | keefe.jpg | 200 | 139 | <a href='keefe.html'>Keefe Campus Center </a>
Finally, there are three image files and three ordinary html files, all in the same directory as the php file and the points data file.
Creating the Files
The php script can be created in Dreamweaver. Start a new dynamic PHP file, go to Code View, erase whatever is there, and copy and paste all five sections of this code into the file. Save it using a filename ending in .php rather than .html. There is one change, you must make, however. That long string of random-appearing characters is a special code given to me by Google for use ONLY in my account in my subdirectory called googlemaps. You need to go to http://www.google.com/apis/maps/signup.html
and request your own key. A Google maps key is good for only one directory. It will not work in subdirectories. Replace my key with your key and save the file again.
To create the points file, open a new file in Dreamweaver and select Other and then Text. Now paste the points data in this file and save it as points.txt. Upload both files.
There is one final step before the program will work (minus the images and links to other web pages). Html files are simply read by the browser. PHP files must be executed and a special flag must be put on the file on the remote server to make it executable. Once this flag is set, you should not need to set it again. If you forget, you will get a server error message.
To do this on Windows, go to Start Programs and select Secure Shell Client. Click Quick Connect, enter remus.amherst.edu for a host and your username as shown below.
Enter your Amherst password when asked. You are now logged in to your account on the Amherst Unix system. You need to change directories to one containing the php script. This is done by typing:
where "directoryname" is the name of the directory. Then type:
This will list all the files in that directory, one per line, along with their permissions. Now type:
chmod u+x phpfilename.php
where phpfilename.php is the name of your php file. This will add execute permission to the file. Now type "ls -la" again and you should see the change. The screenshot below illustrates these steps. Notice that the line for googlemap2.php initially begins with -rw-r and after the chmod command changes to -rwxr. This is what marks the file as executable.
Close the secure shell application.
At this point, if you point your browser to the php script, you should see a map with the markers on it. If you click a marker, it will open, but there will be no image and the link won't work, unless you added the appropriate image and html files to that directory. Nevertheless, you have a working Google map.
The obvious ways you can tailor this map is to create a points file that describes different points, and links to different images and html files. It is also easy to change the map's center and zoom level in the third section of the PHP file. The size of the map is set in the second section of the file.
The points file consists of a line for each point. The items on each line are separated by a "|" symbol. In order, the items are:
- the longitude of the point
- the latitude of the point
- the name of the image file
- the width of the image file
- the height of the image file
- the text to go below the image, which can include html tags
An easy way to find the longitude and latitude of a point is to go to http://www.itouchmap.com/?r=v&st=l2 . Be sure to change the map to hybrid mode from map mode, so that you can see both the satellite images of buildings as well as roads. Click the point you want on the map, and the latitude and longitude will be displayed below. Just copy and paste the numbers. They can be used either in the points file or can be used to replace the map center in the third section of the PHP file. Photoshop can be used to find the width and height of image files and to resize them if necessary.
Images and any linked html files are assumed to be in the same directory as the map file. However, you must replace the base url for the googlemaps subdirectory in my account with the appropriate subdirectory in your account.