My first PHP/MySQL/AJAX application

This post is intended to serve as a start point to others who have interest in developing their first GoogleMaps application using PHP/MySQL, to those who enjoy reading about this stuff just for fun and to those who don't have a clue about what these acronyms mean but perhaps would like to get into it after you've seen the result. The idea is to follow the design proposed here by Pamela Fox.

Requirements:

• Apache, PHP5, MySQL
• Basic knowledge about Javascript and XML
• Google Maps API key (you can get one here with a Google Account)

How To:

• Step 1. Populate your database with data. There are several ways to do this. I chose to manually introduce 4 sample rows with phpmyadmin. You can populate the database with the data that you like but don't forget to reserve two fields (type float) for the latitude and longitude:

database sample entries

• Step 2. Output XML. In this part is where your PHP code has to query the database, extract the data and generate an XML output that the XMLHttpRequest can access later on from your main page. It's important that you keep your username, password and database name on a different file (dbinfo.php):

dbinfo.php

In order to query the database we just need to open a connection and run our query (xmlGenerator.php part 1):

xmlGenerator.php (I)

Yet, the xml output has to be generated and that is done by making use of the dom functions (xmlGenerator.php part 2):

xmlGenerator.php (2)

• Step 3. Now, all that's left is to load the markers in a Google map. If you are new to the Google Maps API, take a look at "The Hello World of Google Maps". Once we have our Google Maps API key for our URL, all we need to do is to load the map and the markers. This is done by the GDownloadUrl function, which is the wrapper of the XMLHttpRequest. The design of the main HTML page is left for the reader. The only two javascript functions used in the creation of the map are as follow:

load function

createMarker function

Finally, the part from which the load function is called:

Before the display of the markers, remember to store all marker information in the database, In this case, for the display of a picture, html code was stored previously in a VARCHAR field in the database. The result of all looks like this:

Precautions and Tips:

• Make sure you are using PHP5 and not PHP4 and that you don't have the domxml library activated on the php.ini file, since this could cause some incompatibility problems while trying to output data in XML. PHP5 has a dom library already built in and you shouldn't have to worry about anything if you intend to generate the XML data the way it was explained here.
• If you want to deploy your application in your machine, just type http://localhost/ in the signup page for a Google Maps API key (stupid but it works).

Sources for this post:

Google Code FAQ - Using PHP/MySQL with Google Maps
Using PHP 5's DOM functions to create XML files from SQL data
Google Maps API