Creating Simple Google Maps

Submitted by Janet K. Price

This tutorial is aimed at people who are comfortable creating web pages in Dreamweaver, but who do not know much if any Javascript or PHP. I'll provide an example and describe some easy ways to modify it.

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:

Google Map #1 Opening Screen

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:

Google Map #1 Open Popup

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.

PHP and Javascript

PHP is a pre-processor. Web pages that end in ".php" instead of being shipped directly to the browser that requested them (like .html pages), are first processed by the PHP program, which executes the PHP code in the file and then strips this code out. Browsers don't see the PHP code. PHP can do things like read data files, which Javascript can't do.

Browsers do see Javascript code and they know how to interpret it. Javascript is used to modify html code on a page and handle events like mouse-clicks. If you view the source code for a page, you'll see the Javascript code.

When creating this Google map, PHP is used to read the data file describing the locations of points and associated images and text and to use this information to create Javascript code defining the points. This Javascript code is then added to the html code before shipping it to the browser of the person who requested the web page.

Code View

The code consists of five sections:

  • The header code, which contains the Google maps key
  • Html and Javascript code to create the basic map in a div in a table
  • PHP code to read the data file and use it to create the text for the Javascript code that defines the data
  • A Javascript function that creates a marker with a popup
  • Javascript code that loops through the data and sets up the markers

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.

#!/usr/local/bin/php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- the person who owns the account in which the set of scripts run must contact google to get their own key -->
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAASOBEhajDyFSQliXRiEG5NBSubfG1nj1TJfX5DqwIbJo8wKIsQhSC_NF5DdE39N_xZDLD1bzxxzproA" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Google Maps Example 1</title>
</head>
 <body>
<!-- create a single-celled table containing a div called "map" -->
<table align="center">
<tr><td>
<!-- width and height specified here are the size of the map -->
<div id="map" style="width:600px; height:500px"></div>
</td></tr>
</table>

<!-- create a blank map in javascript in the div with id of "map" -->
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
<!-- 3rd parameter is zoom level with smaller numbers zooming in more -->
map.centerAndZoom(new GPoint(-72.51667, 42.37083), 1);
map.setMapType(G_HYBRID_MAP);
</script>
 <!-- php script that reads the data and creates the javascript code for the markers -->
<?php
$filename="points";
$rows=file($filename);

//create long string of javascript code from the data in $jcode, a php variable
//first define the variables
$jcode = '<script type="text/javascript"> ';
$jcode .= "var lat=[];";
$jcode .= "var lon=[];";
$jcode .= "var photo=[];";
$jcode .= "var width=[];";
$jcode .= "var height=[];";
$jcode .= "var text=[];";
$jcode .= "\n";

//now stuff arrays
$n = count($rows);
for ($i=0;$i<$n;$i++)
{
//get rid of the linefeed first
$line = trim($rows[$i]);
//split it out into an array using the delimiter
$linesplit = explode("|",$line);
//now pull out the individual items
$lat[$i]=$linesplit[0];
$jcode .="lat[$i]=$lat[$i];";
$lon[$i]=$linesplit[1];
$jcode .="lon[$i]=$lon[$i]; ";
// add the base url to the front of the image name
$photo[$i] = "http://www.amherst.edu/~jkprice/googlemaps/" . trim($linesplit[2]);
$jcode .="photo[$i]=\"$photo[$i]\";";
$width[$i]=trim($linesplit[3]);
$jcode .= "width[$i]=\"$width[$i]\";";
$height[$i]=trim($linesplit[4]);
$jcode .= "height[$i]=\"$height[$i]\";";
$text[$i] = trim($linesplit[5]);
$jcode .= "text[$i] = \"$text[$i]\";";
//end with a linefeed so that if you need to read the source it's not obnoxious
$jcode .= "\n";
}
//finish up the string of javascript code
$jcode .= "n = $n;";
$jcode .= '</script>';
//now echo this variable so all these lines of javascript become part of the page
echo $jcode;
?>

 <script type="text/javascript">
// define the function that creates a marker with an info window
// info window contains an image and html text
// image must specify height and width and quotes must be escaped with \
function createMarker(point, url,text,h,w)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml("<img src = \"" + url + "\" width = \"" + w + "\" height=\"" + h + "\"><p>" + text);
}
);
return marker;
}
 // Run thru the list of markers stuffed into the arrays by the javascript created with the php
// script and call the function for each one of them
for (i=0;i<n;i++)
{
var latitude = lat[i];
var longitude = lon[i];
var url = photo[i];
var h = height[i];
var w = width[i];
var thistext = text[i];
var point = new GPoint(latitude, longitude);
map.addOverlay(createMarker(point,url,thistext,h,w));
}
</script>
</body>
</html>

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>
-72.51580595970154 | 42.36976896085545 | lifesciences.jpg | 256 | 192 | <a href='lifescience.html'>McGuire Life Sciences </a>
-72.51474380493164 | 42.37354982682623 | cooperhouse.jpg | 200 | 130 | <a href='cooper.html'>Cooper House </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.

Start ssh

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:

cd public_html/directoryname

where "directoryname" is the name of the directory. Then type:

ls -la

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.

Add Execute Permission

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.

Making Changes

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.