BTech96: Who is Where? How to Do It

Building the map

At a very high level building the "BTech96 Across the World" map requires:

1. Google Maps API (obviously, to generate the map)
2. Simple AJAX coding (for refreshing the search results without reloading the page)
3. PHP (the engine for the server-side stuff)
4. MySQL (to store the information)

Please note that to build your own stuff using the Google Maps API you have to request your own API key. This key is domain-specific. At the beginning of the file, where all the stylesheet descriptions are present, you will have include the following:

<script src="http://maps.google.com/maps?file=api&v=2&key=whatever_your_key_is" type="text/javascript"></script>

The above ensures that the javascript content defined in the Google Maps API is accessible by the page.

Going into the details, here is what I did:

1. Wrote a program to get the coordinates (i.e. latitude and longitude) of any place. Note that if you already have the coordinates for each place then you don't need this part. I made use of the GeoCode functionality provided in the Google APIs to retrieve the coordinates. I need the coordinates to place a marker on the map.
   1. I first tried the standard JavaScript based approach, but ran into issues where the GeoCode was returned before being fully generated (timeout issues because the call is asynchronous).
   2. I then used a PHP-based variant.
   3. The GeoCoder returns a CSV file.
   4. I ran into problems with processing the CSV because my ISP has some security concerns regarding reading a file through HTTP in PHP (file_get_contents). Instead I had to use CURL.
2. Created a locations table in MySQL with fields for Entry Number, address and coordinates. Note that a person can have multiple locations
3. Built the map based on the locations
   1. Iterated through the table
   2. For each location:
      1. Grouped all the people in that location
      2. Created a marker by invoking the GMarker class on the coordinates of each location
      3. Displayed the marker on the map.
      4. Added an "onclick" for each marker, to show the popup with the names of the people on the batch.
4. Built the Search using AJAX
   1. The search string is passed to a different PHP using the XMLHttpRequest object (in Firefox, Opera and Safari) or the XMLHTTP object (in IE)
   2. The search runs a very simple query - it checks for matches in the name, entry number and nicknames.
   3. For every match the search tries to determine if there is a location. The results are grouped based on the availability of the location information for a given person.
   4. The matches are linked to the corresponding markers on the map based on the coordinates of the location.
   5. The results are passed to XMLHttpRequest / XMLHTTP object, which updates the search result without reloading the page.