Google Maps via PHP/Mysql Tutorial - API version 2

This tutorial is (c) 2006 by Hans van der Maarel - Red Geographics. No parts of it can be reproduced without obtaining permission. Please be respectful.

This tutorial describes the way the Who Locations sample on this website has been created. It uses version 2 of the Google Maps API. Any parts that differ significantly from version 1 will be indicated in bold. A version 1 sample of the same code is also available.

Prerequisites

  • An Apache webserver running PHP and MySQL (other webserver with PHP and MySQL will probabely do as well).
  • A table in your database with lat, lon and description fields.
  • Some basic HTML and PHP knowledge.

We are going to use PHP to dynamically create an HTML document with the appropriate Google Maps javascript code. At some points, indicated in [red], you will need to add your own specific details (Google Maps key, database connection details, etc.), omitting the [ and ].

Database structure

The database can be recreated with this snippet of sql: 

CREATE TABLE wholocations (
  id int(11) NOT NULL auto_increment,
  lat decimal(10,6) NOT NULL default '0.000000',
  lon decimal(10,6) NOT NULL default '0.000000',
  description varchar(255) NOT NULL default '',
  PRIMARY KEY  (id)
) TYPE=MyISAM;

Section 1: header

<html>
<head>
<title>Who locations in London</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[your Google Maps key]" type="text/javascript"></script>
</head>
<body>
<p><strong>Who-locations in London</strong></p>
<div id="map" style="width: 800px; height: 600px"></div>

Nothing exciting here. In the original document there is also a link to a stylesheet, but as it's irrelevant for this example, it has been omitted. Note the v=2 in the script line that calls the Google Maps api.

Section 2: setting up the map

<script type="text/javascript">
//<![CDATA[

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(51.512161, -0.14110), 11, G_NORMAL_MAP);

// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};

As you can see, the map is being defined, scale and type controls are added and an intial map view is set through the map.centerAndZoom function. Then a function for placing the markers is defined. The Listener in the function will pop up a info window with a text if a marker is clicked. The main difference with the version 1 api is the new setCenter function, using GLatLng instead of GPoint (GPoint is from now on only used for points-on-screen, not geographic locations). Note that the order of the coordinates is now lat/lon (instead of lon/lat), the zoom numbers have been reversed (the higher the number, the more detailed the zoom level) and the map types have been given different names.

Section 3: reading information from the database

<?php
$link = mysql_connect("[database server]", "[username]", "[password]") or die("Could not connect: " . mysql_error());
mysql_selectdb("[database name]",$link) or die ("Can\'t use dbmapserver : " . mysql_error());

$result = mysql_query("SELECT * FROM wholocations",$link);
if (!$result)
{
echo "no results ";
}
while($row = mysql_fetch_array($result))
{
echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");\n";
echo "var marker = createMarker(point, '" . addslashes($row['description']) . "');\n";
echo "map.addOverlay(marker);\n";
echo "\n";
}

mysql_close($link);
?>

//]]>
</script>

</body>
</html>

This is the block of PHP code that reads the information from the database, parses it and writes it into the document. First a link to the database is set up, then a query is passed to it. The result of this queries, all records in the table wholocations, is then put into an array. For every element in the array, the function createMarker (which was defined above) is called with the lat, lon and description of that point. Note that this will generate the code for the browser to interpret. If you look at the source code of the page in your browser, you'll see the result of this php code. The point placement now also uses GLatLng instead of GPoint. Note that the Firefox 1.5 infowindow fix doesn't seem to be needed anymore. The use of the addslashes function allows you to have special characters like &, ' and " in your description field, as well as accented letters.

And that's all there is to it. If you have any questions, or if this tutorial was of use to you, please feel free to let me know. Also, it would be much appreciated if you post a link to it on your Google Maps application.

I would like to thank the people of GoogleMapki who have put together an overview of changes in the v2 API.

This tutorial is (c) 2006 by Hans van der Maarel - Red Geographics. No parts of it can be reproduced without obtaining permission. Please be respectful.

Index : Google Maps API Overview : Tutorial - PHP/MySql version 2