Quote:

Abstract
This is a tutorial which shows how do develop your own implementation of Google Maps using PHP, MySQL, a little html/javascript, and a Google Api Key. This tutorial shows how to make your own Geographical Visitor Map, which I am using on my own website (Caution: For some reason that link crashes Internet Explorer). I also have a running demo which is structured exactly as this tutorial is set up, which does not crash IE.

The purpose
Everyone knows about Google Maps. They revolutionized the mapping world with the integration of satelite imagery, directions, and standard atlas-style maps, which display road information, parks, cities, states, etc. In the internet world, Google Maps was perhaps the first major website to feature a beautiful robost AJAX based interface. This meant you could scroll around the map, zoom in and out, as well as switch between map styles - all without refreshing the page. Now adays, AJAX is all the rage. "Web 2.0" is the new buzzword, and everyone (myself included) is racing to come up with the coolest AJAX-enabled projects. How long will the fad last? Who cares! At least we all have something else to complain about to the standards-nazis. Anyways, here I will show you how to build an interface to Google Maps which will show you the geographical location of your website visitors. We will be using some standard web tools, including PHP, MySQL, Javascript, and of course XHTML/CSS.


Zip File
You can download a zip file to follow a long with. It is meant to be used as reference, and may not completely work on its own.
Download from attached
This includes:

    * gmap.php - main gmap file
    * netgeo.php - IP 2 GPS lookup
    * browser.php - Browser / OS info
    * map_ip.sql - SQL Table Syntax



Before We Start
There are a few things you need to have set up before we start:

    * First, a Google API Key
    * A MySQL Database for storing the Geographical Information
    * A working web server which has PHP and a MySQL database



The Google API Key is a very simple thing to retrieve, just go to the website and sign up. It seriously takes less than 2 minutes. We need this in order to connect to the Google Maps server. The only limitation is that you have something like 5000 hits per day limit, and you can only use each API on one domain that you specify upon sign up.

I would also suggest briefly reading up on the Google Maps API Documentation. Although this is not required, it will give you an understanding of what we will be doing here today. It is a very easy read, and if you have a little bit of programming and/or javascript experience, it will especially be a breeze.


The Structure of it all!
There are several pieces to the project we are doing.

    * A PHP function to convert and store a visitor's Longitude and Latiude from their Ip address (as well as any other information, such as Operating System or Web Browser)
    * A PHP function for determining the Browser and OS of the visitor. This is a nice feature to add some "spice" to your map
    * A PHP function to output the necessary Javascript commands to tell the Google Map what to display according the the Longitude/Latidude information we have
    * The actual Google Map page that will display the blips where the visitors are from



The MySQL Database Set Up
We need to create a database to store all of the user information into. You can use a tool such as PHPMyAdmin, or the MySQL Command line. You will need to have an existing database, of course. Once you have it created, go into PHPMyAdmin or the command line, and use the following SQL syntax to create the necessary table:

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

--
-- Table structure for table `map_ip`
--

CREATE TABLE IF NOT EXISTS map_ip (
  id bigint(7) NOT NULL auto_increment,
  ip text NOT NULL,
  longitude float NOT NULL default '0',
  latitude float NOT NULL default '0',
  user_agent text NOT NULL,
  city text NOT NULL,
  state text NOT NULL,
  country text NOT NULL,
  OS text NOT NULL,
  PRIMARY KEY  (id),
  UNIQUE KEY id (id)
) TYPE=MyISAM;

The SQL format isn't perfect, but this will create a table that can store all the information we need and a little more. Also, as a note, I found out after an hour of debugging that you cannot name a row long, as that is a keyword for a data type. Hence I used to have 'long' and 'lat' instead of 'longitude' and 'latitude'. MySQL does nothing to help you figure this out, either. Just spits back generic syntax errors. Doh!

We will need to create our first PHP function here, for connecting to the MySQL database. I'm using a persistent connection so we only have to connect one time. I normally include the MySQL variables in a separate configuration file, but for this simple of a script I am including them in the connect function, as shown below. You can use the following function after you fill in your MySQL information.

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

function db_connect()
{
    // *** Create a persistant MySQL Connection for the entirety of the script ***
    // *** Be sure to change the variables below so you can connect! ***
    define ('MYSQL_SERVER',        'localhost');
    define ('MYSQL_PASSWORD',    'YOUR MYSQL PASSWORD');
    define ('MYSQL_USERNAME',    'YOUR MYSQL USERNAME');
    define ('MYSQL_DB',        'YOUR MYSQL DATABASE');

    // *** Set up the persistant link, or throw an error and quit if not successful ***
    if (!(@mysql_pconnect(MYSQL_SERVER, MYSQL_USERNAME, MYSQL_PASSWORD) and @mysql_select_db(MYSQL_DB)))
        die(sprintf("Cannot connect to database, error: %s", mysql_error()));
}

We will call this function at the beginning of the page.


Recording and Converting Visitor Info
The heart of this application lies in the ability to convert the IP of every visitor into a format that we can pass to the Google Map so it can display a blip on the map. After some tedious searching, I found a PHP class that interfaces with netgeo.com's IP to GPS database. I was surprised at how hard it was to find this, but the hard part is done for you! If you're lucky enough to have a commercial package, or find an alternative free package, feel free to use these. For this example we're sticking to this one. Also, I am using another free package to determine the browser and operating system of the visitor, called Browser. Oh, the beauty of open source software! :).

The function add_geoip() goes through all the necessary action to ensure the Ip gets converted to a GPS coordinate, as well as retrieving the Browser and Operating system. All of this information is then added to the database, assuming this is the first hit from the visitor. We also want to record only items we will not be able to retrieve later, such as IP, Browser, Operating System. We also store the longitude and latitude, as well as city/state/country because we only want to retrieve this data one time, so we might as well do it now. This prevents page lag from hitting the GeoIP server every time we want this information. Think of it as a "cache".

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

function add_geoip()
{
    // *** add_geoip() - http://frikk.tk

    // *** Functions for interfacing with the GeoIP Server ***
    include_once "netgeo.php";
    // *** Include the Browser Class, for determining OS and Browser ***
    include_once "browser.php";
    
    // *** Set up the local Variables ***
    $info = array();
    $id = ""; $query = "";
    $user_agent = new Browser;
    $netgeo = new netgeo_class;
    
    // *** First of all, are they aready in the database? ***
    $query = mysql_query(sprintf("select id from map_ip where ip='%s';", $_SERVER["REMOTE_ADDR"]));
    list($id) = mysql_fetch_row($query);
    
    // *** If they are already in the database, exit now ***
    if (strlen($id))
        return false;
        
    // *** If we can't get the information, theres no point in continuing ***
    if(!($netgeo->GetAddressLocation($_SERVER["REMOTE_ADDR"], $location)))
        return false;
        
    // *** Get the longitude and latitude values ***
    $longitude =    doubleval($location["LONG"]);
    $latitude =     doubleval($location["LAT"]);
    
    // *** Sometimes we run into problems, and longitude
    //    and latitude both are set to 0.  We will ignore these cases ***
    if ($longitude == 0 && latitude==0) return;
        
    /* *** Lets gather the information.  We want to record things
        that we can't figure out later (like IP, Browser) and
        also things that don't require a hit (and hence page lag)
        to the GeoIP server later (Coords, City, State, etc). *** */
        
    $info["IP"] =         $_SERVER["REMOTE_ADDR"];
    $info["User_Agent"] =     $user_agent->Name;
    $info["OS"] =         $user_agent->Platform;
    $info["Long"] =     $longitude;
    $info["Lat"] =         $latitude;
    $info["City"] =     htmlentities(ucwords(strtolower($location["CITY"])));
    $info["State"] =     htmlentities(ucwords(strtolower($location["STATE"])));
    $info["Country"] =     htmlentities(ucwords(strtolower($location["COUNTRY"])));
    
    // *** Now that we have everything we need, lets add them to the database ***
    if (!mysql_query(sprintf("insert into map_ip
        (ip, user_agent, os, longitude, latitude, city, state, country) values
        ('%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s');",
        $info["IP"], $info["User_Agent"], $info["OS"], $info["Long"],
        $info["Lat"], $info["City"], $info["State"], $info["Country"])))
    {
        echo "error adding your geoip entry to database!<br>";
        echo mysql_errno().": ".mysql_error()."<BR>";
        return false;
    }
    
    // *** We're all done now.  Return true to say that we didn't have an error ***
    return true;
}

We want to call this function one time for every page hit. Every time a visitor comes to your website for the first time, they will be added to the database and the GeoIP database will get queried to figure out their Longitude and Latitude. Easy enough? I'll show you how to use this a little later.


Creating the Google Map
Before we add the user information we've collected, we want to make sure we can get a working google map. If you haven't done so already, make a basic Google Map template. Here is an example, be sure to put your API Key down on line 5!

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

<!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>
    <title>Google Map Test!</title>
    <script src="http://maps.google.com/maps?file=api&v=1&key=YOUR_GOOGLE_API_KEY" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width: 750px; height: 450px"></div>

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

        // *** Create a marker with simple text in it ***
        function createMarker(point, text) {
            var marker = new GMarker(point);

            // *** Display some html formatted text ***
            var html = "<b>" + text + "</b>";

            GEvent.addListener(marker, 'click', function() {
                marker.openInfoWindowHtml(html);
            });

            return marker;
        }

        // *** Create the map instance ***
        var map = new GMap(document.getElementById("map"));

        // *** Add some controls to it ***
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        // *** Center / Zoom it where? ***
        map.centerAndZoom(new GPoint(0, 0),16); // 16 = Zoom Out All the Way

        // *** Add a point.  First we define the coordinates, then we
        //    make the marker, or blip, for it.  Finally we add it
        //    to the map "overlay".  We need to do this for every
        //    point we will be displaying for each visitor.  If you
        //    haven't figured out, this is the part that will be
        //    dynamically output by a PHP we will write ***
        var point3 = new GPoint(-117.16, 32.72);
        var marker3 = createMarker(point3, "This is a point");
        map.addOverlay(marker3);

        //]]>
    </script>
</body>
</html>

This page is the most basic Google Map. What we are going to do is redefine the createMarker function to handle the ability to add different information about the visitor, as well as write a PHP function to dynamically output the javascript tha creates the points (lines 44 - 46). If you do not see a Google Map with a blip somewhere in California with the above example, then you need to make sure your Google API Key is correctly set up and in the script above.


Writing a new createMarker function
We need to rewrite the javascript function createMarker() so it can handle some more arguments and put the information we want in it (In this case: city, state, country, browser, OS). This is the function I currently use:

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

function createMarker(point, city, state, country, os, browser) {
    // *** Updated createMarker function - http://frikk.tk ***
    var marker = new GMarker(point);

    // *** Display some html formatted text ***
      var html = "<div style="width: 200px">" + city +
          ", " + state + ", " + country + "<br><u>OS</u>: " + os +
          "<br><u>Browser</u>: " + browser + "</div>";
          
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
    });

    return marker;
}

All we've added is a formatted <div> element. We need to add the "style= width: 200px" because if we don't specify this value, firefox and IE display the marker differently. A well known bug that is easily fixed. Now that we have an updated createMarker function, lets add some points to utilize this. Before we can make the dynamic PHP output, we need to make sure that the function is set up correctly. Lets go back to the example Google Map, and replace lines 44-46 with this:

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

var point3 = new GPoint(-117.16, 32.72);
var marker3 = createMarker(point3, "San Diego", "California", "Us", "Windows", "Firefox v:1.5.0.1");
map.addOverlay(marker3);

Now, when you click on the blip over california, you should see more information about the point, including "San Diego, California" and "Windows", "Firefox v:1.5.0.1", etc.


Tie them all together
Well, at this point we have a database with all the GPS information we could want, and a working Google Map which can accept markers that display the OS, Browser, etc. Now we just have to tie these together! This function generates the javascript needed to create the markers:

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

function generate_markers()
{
    // *** Generate the Google Map Markers! ***
    $number_of_markers = 100; // How many markers to dispaly?
    $marker_html = "";
    $points = array();
    
    $query = mysql_query(sprintf("select * from map_ip order by id desc limit %s;", $number_of_markers));
    while ($points = mysql_fetch_array($query))
    {
        $point_name =    sprintf("point%s", $points["id"]);
        $marker_name =     sprintf("marker%s", $points["id"]);
        
        // *** All we're doing here is making the javascript markers ***
        /* They look like this:
        var {POINT_NAME} = new GPoint({LONG}, {LAT});
        var {MARKER_NAME} = createMarker({POINT_NAME}, '{CITY}',
            '{STATE}', '{COUNTRY}', '{OS}', '{USER_AGENT}');
        map.addOverlay({MARKER_NAME});
        */
        $marker_html .= sprintf("var %s = new GPoint(%s, %s);n",
            $point_name, $points["longitude"], $points["latitude"]);
        $marker_html .= sprintf("var %s = createMarker(%s, '%s', '%s', " .
            "'%s', '%s', '%s');n",
            $marker_name, $point_name, $points["city"],
            $points["state"], $points["country"],
            $points["OS"], $points["user_agent"]);
        $marker_html .= sprintf("map.addOverlay(%s);n", $marker_name);
    }
    return $marker_html;
}

Now that we have a function to output the javascript which will add the last 50 markers to the map, we need a way to output the rest of the map.


The Final Script
Here is the final script for making the Google Map. This has all the php we've written listed first, followed by the html output. Here you go! If you copy this verbatim, you'd want to be sure to change the Google API Key, as well as name the file with a php extension. I have added, at the bottom, a function called make_google_map(). All this does is output the html page to generate the map. For kicks, we're going to call this gmap.php:

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

<?
/*
// ############################################################################
Google Maps! - http://frikk.tk
Author: Blaine Booher
Date: March 14 (PI DAY!) 2006
This is a working example on how to set up your own Google Maps which
displays information about where your visitors are coming from, and what
types of software they are running.  For more info, please visit http://frikk.tk

To use, just make sure your MySql database is set up like below, and also
add your credentials to db_connect():

CREATE TABLE IF NOT EXISTS map_ip (
  id bigint(7) NOT NULL auto_increment,
  ip text NOT NULL,
  longitude float NOT NULL default '0',
  latitude float NOT NULL default '0',
  user_agent text NOT NULL,
  city text NOT NULL,
  state text NOT NULL,
  country text NOT NULL,
  OS text NOT NULL,
  PRIMARY KEY  (id),
  UNIQUE KEY id (id)
) TYPE=MyISAM;

// ############################################################################
*/

// *** Include the two external php files ***
include_once "netgeo.php";
include_once "browser.php";

// *** Convert the visitor's Ip to Long/Lat.  This is the only function you'd
//    want to add to every page you wish to record an IP from ***
db_connect();
add_geoip();

// *** Comment this line out if you are including this file from another script ***
make_google_map();

// ######## Function Listings that we wrote earlier in the tutorial! ###########
function db_connect()
{
    // *** Create a persistant MySQL Connection for the entirety of the script ***
    // *** Be sure to change the variables below so you can connect! ***
    define ('MYSQL_SERVER',        'localhost');
    define ('MYSQL_PASSWORD',    'YOUR MYSQL PASSWORD');
    define ('MYSQL_USERNAME',    'YOUR MYSQL USERNAME');
    define ('MYSQL_DB',            'YOUR MYSQL DATABASE');

    // *** Set up the persistant link, or throw an error and quit if not successful ***
    if (!(@mysql_pconnect(MYSQL_SERVER, MYSQL_USERNAME, MYSQL_PASSWORD) and @mysql_select_db(MYSQL_DB)))
        die(sprintf("Cannot connect to database, error: %s", mysql_error()));
}

function add_geoip()
{
    // *** add_geoip() - http://frikk.tk

    // *** Functions for interfacing with the GeoIP Server ***
    include_once "netgeo.php";
    // *** Include the Browser Class, for determining OS and Browser ***
    include_once "browser.php";

    // *** Set up the local Variables ***
    $info = array();
    $id = ""; $query = "";
    $user_agent = new Browser;
    $netgeo = new netgeo_class;

    // *** First of all, are they aready in the database? ***
    $query = mysql_query(sprintf("select id from map_ip where ip='%s' order by id desc;", $_SERVER["REMOTE_ADDR"]));
    list($id) = mysql_fetch_row($query);

    // *** If they are already in the database, exit now ***
    if (strlen($id))
        return false;

    // *** If we can't get the information, theres no point in continuing ***
    if(!($netgeo->GetAddressLocation($_SERVER["REMOTE_ADDR"], $location)))
        return false;

    // *** Get the longitude and latitude values ***
    $longitude =    doubleval($location["LONG"]);
    $latitude =     doubleval($location["LAT"]);

    // *** Sometimes we run into problems, and longitude
    //    and latitude both are set to 0.  We will ignore these cases ***
    if ($longitude == 0 && latitude==0) return;

    /* *** Lets gather the information.  We want to record things
        that we can't figure out later (like IP, Browser) and
        also things that don't require a hit (and hence page lag)
        to the GeoIP server later (Coords, City, State, etc). *** */

    $info["IP"] =         $_SERVER["REMOTE_ADDR"];
    $info["User_Agent"] =     $user_agent->Name;
    $info["OS"] =         $user_agent->Platform;
    $info["Long"] =     $longitude;
    $info["Lat"] =         $latitude;
    $info["City"] =     htmlentities(ucwords(strtolower($location["CITY"])));
    $info["State"] =     htmlentities(ucwords(strtolower($location["STATE"])));
    $info["Country"] =     htmlentities(ucwords(strtolower($location["COUNTRY"])));

    // *** Now that we have everything we need, lets add them to the database ***
    if (!mysql_query(sprintf("insert into map_ip
        (ip, user_agent, os, longitude, latitude, city, state, country) values
        ('%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s');",
        $info["IP"], $info["User_Agent"], $info["OS"], $info["Long"],
        $info["Lat"], $info["City"], $info["State"], $info["Country"])))
    {
        echo "error adding your geoip entry to database!<br>";
        echo mysql_errno().": ".mysql_error()."<BR>";
        return false;
    }

    // *** We're all done now.  Return true to say that we didn't have an error ***
    return true;
}

function generate_markers()
{
    // *** Generate the Google Map Markers! ***
    $number_of_markers = 100; // How many markers to dispaly?
    $marker_html = "";
    $points = array();

    $query = mysql_query(sprintf("select * from map_ip order by id desc limit %s;", $number_of_markers));
    while ($points = mysql_fetch_array($query))
    {
        $point_name =    sprintf("point%s", $points["id"]);
        $marker_name =     sprintf("marker%s", $points["id"]);

        // *** All we're doing here is making the javascript markers ***
        /* They look like this:
        var {POINT_NAME} = new GPoint({LONG}, {LAT});
        var {MARKER_NAME} = createMarker({POINT_NAME}, '{CITY}',
            '{STATE}', '{COUNTRY}', '{OS}', '{USER_AGENT}');
        map.addOverlay({MARKER_NAME});
        */
        $marker_html .= sprintf("var %s = new GPoint(%s, %s);n",
            $point_name, $points["longitude"], $points["latitude"]);
        $marker_html .= sprintf("var %s = createMarker(%s, '%s', '%s', " .
            "'%s', '%s', '%s');n",
            $marker_name, $point_name, $points["city"],
            $points["state"], $points["country"],
            $points["OS"], $points["user_agent"]);
        $marker_html .= sprintf("map.addOverlay(%s);n", $marker_name);
    }
    return $marker_html;
}

function make_google_map()
{
?>
<!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>
    <title>Google Map Test!</title>
    <script src="http://maps.google.com/maps?file=api&v=1&key=YOUR_GOOGLE_API_KEY" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width: 750px; height: 450px"></div>

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

        // *** Create a marker with simple text in it ***
        function createMarker(point, city, state, country, os, browser) {
            // *** Updated createMarker function - http://frikk.tk ***
            var marker = new GMarker(point);

            // *** Display some html formatted text ***
            var html = "<div style="width: 200px">" + city +
                ", " + state + ", " + country + "<br><u>OS</u>: " + os +
                "<br><u>Browser</u>: " + browser + "</div>";

            GEvent.addListener(marker, 'click', function() {
                marker.openInfoWindowHtml(html);
            });

            return marker;
        }

        // *** Create the map instance ***
        var map = new GMap(document.getElementById("map"));

        // *** Add some controls to it ***
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        // *** Center / Zoom it where? ***
        map.centerAndZoom(new GPoint(0, 0),16); // 16 = Zoom Out All the Way

        // *** Add a point.  First we define the coordinates, then we
        //    make the marker, or blip, for it.  Finally we add it
        //    to the map "overlay".  We need to do this for every
        //    point we will be displaying for each visitor.  If you
        //    haven't figured out, this is the part that will be
        //    dynamically output by a PHP we will write ***
        <? echo generate_markers(); ?>

        //]]>
    </script>
</body>
</html>
<?
}
?>

If you'll notice, I've added on line 204 the output of generate_markers. If everything is set up correctly, you should be ready to go! The only thing to remember is you have to call add_geoip() on every page you plan on recording the Ips for. It should be simple to extend this to use on any page you want. You would also want to comment out line 41 above, and call that function somewhere else. This way you're only recording information when you include the script, instead of generating the map. For example, say you have index.php that your main website is on. You could just do this:

Code: [Download] [Hide] [Select]

Code: [Download] [Show]

<?
include_once "gmap.php";

// *** The rest of your PHP code, or html, or whatever ***
?>

By including the gmap.php, you are already running the add_geoip();. Its that simple!

gmap_tutorial.zip
Description:		Download
Filename:	gmap_tutorial.zip
Filesize:	101.87 KB
Downloaded:	380 Time(s)

novice programmer wrote: [View Post]

See this: http://www.icyphoenix.com/viewtopic.php?t=3165

It is for Icy Phoenix.

ieio wrote: [View Post]

The only thing to remember is you have to call add_geoip() on every page you plan on recording the Ips for. It should be simple to extend this to use on any page you want. You would also want to comment out line 41 above, and call that function somewhere else. This way you're only recording information when you include the script, instead of generating the map. For example, say you have index.php that your main website is on.