As I already mentioned in my previous post, to measure the distance between two points on a sphere one can use Haversine formula. For a detailed description I suggest visiting the wikipedia site. In our example we will use a simplified version of Haversine formula, which is caused by a really simple reason. Executing a web query with the actual Haversine formula might lead to a really slow response from the database and our simplified version will retrieve results which do not differentiate that much with the original version.

For retrieving the company branches in a certain radius we will first build a php class, which will be responsible for translating the zip code into geographical lengths and then use this values to retrieve the results and return them as json_encoded() data. Because our class will be relatively long, I will split it into parts and explain it line by line.

Since we are using an AJAX request to retrieve our data and the location of our php file is easy to guess just by looking at our jQuery code (will come after php class), we add a simple check of the apache environmental variable to check, if it actually is an XMLHttpRequest. A lot of you will probably say that this security measure is not enough, but for this example, it will at least stop all the robots trying access this file and since looking up addresses might consume a lot of resources of your server, this will save you some speed lost on servers with high traffic.

1
2

if ($_SERVER["HTTP_X_REQUESTED_WITH"] != 'XMLHttpRequest')
  die('why are you doing this??');

In line 3 we create our class. Since the subject of this example is finding company branches, lets call it Branch. In lines 5 to 13, we define some variables, which we will use in our class. I think they are pretty much self explanatory, and you will understand, what is their usage just by looking at the rest of the class.

3
4
5
6
7
8
9
10
11
12
13

class Branches {
 
  private static $_key = 'YOUR GOOGLE MAPS KEY';
  private static $_host = 'localhost';
  private static $_db_user = 'root';
  private static $_db_pass = 'pass';
  private static $_db_name = 'db';
 
  private $zip, $radius, $data_set;
 
  public $results = array();

In our constructor we connect to the database and set the radius and zip properties. You could notice that I convert the zip property to integer as well and I additionally add leading zero for strings, which length equals 4. Well, this class was written for German zip codes. You might want to change this parts so it suits your needs. After all it will be important in the part where we will convert the zip code to geographical length, so Google can find this zip code in their database.

14
15
16
17
18
19
20
21
22
23
24
25

public function __construct()
{
  $sql = mysql_connect(self::$_host, self::$_db_user, self::$_db_pass) or die(mysql_error());
  mysql_select_db(self::$_db_name, $sql) or die(mysql_error());
 
  $this->radius = (int)$_GET['radius'];
  $this->zip = (int)$_GET['zip'];
 
  // add leading zeros in case of 0... zip codes
  if (strlen($this->zip) == 4)
    $this->zip = sprintf("%05s", $this->zip);  
}

In line 26 we define a public method translateZipToLatLng() and in line 39 a private method getGeolocation(), which both will be responsible for translating the zip code into the geographical length. To get a detailed description, what this two methods actually do, refer to my other post: Geolocation class - retrieving longitude and latitude using google maps.

26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

public function translateZipToLatLng()
{
  $url = 'http://maps.google.com/maps/geo?q=' . urlencode($this->zip . ', Germany') . '&output=csv&key=' . self::$_key;
 
  $response = $this->getGeolocation($url);
 
  if (substr($response, 0, 3) === '200') {
    $geo = explode(',', $response);
    return $data = array($geo[2], $geo[3]);
  }
  return false;
}
 
private function getGeolocation($url)
{
  $init = curl_init();
  curl_setopt($init, CURLOPT_URL, $url);
  curl_setopt($init, CURLOPT_HEADER,0);
  curl_setopt($init, CURLOPT_USERAGENT, $_SERVER["HTTP_USER_AGENT"]);
  curl_setopt($init, CURLOPT_RETURNTRANSFER, 1);
  $response = curl_exec($init);
  curl_close($init);
 
  return $response;
}

In line 51 we define a private method getResults, which, as you can see, will be responsible for retrieving all the information from the “branches" table and additionally measure the approximate distance from the zip code provided by the user to our actual company branches. In line 56 we define private method populate results, which will be responsible for creating an array of the results retrieved from the database. As you can see, if our query returns zero rows we define an error, if our query returns at least one row, we create an array with all the information about the company. The last public method in line 75, findBranches() will be the one, which we will call after instantiating our class and translating zip code into geographical length.

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

private function getResults($latlng)
{
  return mysql_query("SELECT *, (POW((69.1*(longitude-{$latlng[1]})*COS({$latlng[0]}/57.3)), '2') + POW((69.1*(latitude-{$latlng[0]})), '2')) AS distance FROM branches HAVING distance < {$this->radius} ORDER BY distance ASC;");
}
 
private function populateResults()
{
  if (!mysql_num_rows($this->data_set)) {
    $this->results = array(array('error' => 'none'));
  } else {
    while ($row = mysql_fetch_assoc($this->data_set)) {
      $this->results[] = array(
        'name'      => utf8_encode($row['name']),
        'zip'       => $row['zip'],
        'city'      => utf8_encode($row['city']),
        'latitude'  => $row['latitude'],
        'longitude' => $row['longitude'],
        'distance'  => round(sqrt($row['distance']),1),
      );
    }
  }
  return $this->results;
}
 
public function findBranches($latlng)
{
  $this->data_set = $this->getResults($latlng);
  return $this->populateResults();
}

Our class for retrieving results is done. For the simplicity I did not assume the case, when the database query returns zero rows, in which radius should be automatically extended. You can easily do this, by writing one more method, which will be responsible for extending the radius and adding a simple if...else check in our findBranches() method, to make it loop until your query returns any results. As I said before though, in a database with many entries, executing a web query with a formula complicated like the one we are using, retrieving results might consume a lot of time, and creating a loop, in which you will repeat the same query might lead to a really long time a user will have to wait for a response. In my case, the database was a little bit over 1000 entries and extending the radius and repeating the query did not result in any remarkable performance lost though.

The last part is the actual usage of the class we just wrote. Basically in line 84 we instantiate our class, in line 85 we translate the zip code to geographical length and according to the value returned by this method we use json_encode() function to return the results as a json representation of the array we just created or an error.

84
85

$branches = new Branches();
echo ($latlng = $branches->translateZipToLatLng()) ? json_encode($branches->findBranches($latlng)) : json_encode(array('error' => 'zip_invalid'));

Since our class for retrieving the results in a certain radius is ready, we should move to our client side code.

To make this simple, I will just show you the whole jQuery code and discuss it line by line.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

$(document).ready(function() {  
  var mapContainer = $('#map')[0];
  if (GBrowserIsCompatible()) {
    if (mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);
      map.setCenter(new GLatLng(52.519015140666,13.419671058654785), 14);
 
      $('#submit').click(function() {
        var zip = $('#zip').val();
        var radius = $('#radius').val();
        if (zip == '') {
          alert("You need to provide a zip code");
          return;
        }
        var rand = new Date().getTime();
        $.getJSON('zip.php?rand=' + rand, { zip: zip, radius: radius }, function(data) {
          var markers = [];
          var descriptions = [];
          var bounds = new GLatLngBounds();
 
          map.clearOverlays();
          $('#error').html('');
          $('#locations').html('');
          $('#closest_location').html('');
          var flag = true;
 
          $.each(data, function(i, item) {
            if (item.error == 'none') {
              alert('No results found or ZIP incorrect');
              $('#error').append('No results found or ZIP incorrect');
              flag = false
              return false;
            }
            var description =
              '<div class="branch" style="float: left;">' +
              item.name + ' (~ ' + item.distance + ' km)<br />' +
              item.zip + ' ' + item.city + '<br />' +
              '<span class="branch_show" style="cursor: pointer; color: blue; text-decoration: underline;" id="' + i + '">Show</span></div>';
            var lat = item.latitude;
            var lng = item.longitude;
            var point = new GLatLng(lat, lng);
            var marker = new GMarker(point);
            markers[i] = marker;
            descriptions[i] = description;
            $('#locations').append(description);
            map.addOverlay(marker);
            bounds.extend(point);
            GEvent.addListener(marker, 'click', function() {
              marker.openInfoWindowHtml(description);
            });
          });
 
          $('#closest_location').append(descriptions[0]);
 
          map.setZoom(map.getBoundsZoomLevel(bounds));
          // just in case we did not find anything
          if (!flag)
            map.setCenter(new GLatLng(51.08282186160976,10.26123046875),6);
          else
            map.setCenter(bounds.getCenter());
 
          $('.branch_show').click(function() {
            var id = $(this).attr('id');
            markers[id].openInfoWindowHtml(descriptions[id]);
          });
        });
      });
    }
  }
});

As usually we want to execute the code on onLoad of our document and we do that in line 1. In line 2 we define our container for the map and in line 3 and 4 we check if browser is compatible and if container was found respectively.

In line 5 we instantiate the Gmap2 inside of our map container, we add some controls in line 6 and set the center in line 7. In line 9 we add a event listener which triggers after a user clicks submit button.

In lines 10 to 15 we add a simple check, if the field with the zip code is not empty and it if is we alert an according message and we break the execution of the code. Additionally we define a zip variable in line 10 and radius variable in line 11, which will hold according information to use in our json request.

In line 16 we define rand variable which we pass during our json request to prevent internet explorer to cache the resource. If we would not do that, and changes you would do to zip.php file would not be visible, because IE would use the cached version of this file.

In line 17 we make a request to the zip.php file, which we wrote earlier and we pass the zip code and the radius to our php file. After the calculation is done and you do not have any errors in your php file we retrieve the information, which we can finally process.

In line 18 and 19 we define two variables as arrays, which will be responsible for holding the information about markers and their corresponding descriptions and in line 20 we instantiate GLatLngBounds object, which we will later use to display the information on our map with matching zoom level.

In line 22 to 26 we remove all markers and we empty all containers holding the information about the places from a previous request. We do that to prevent displaying of the same markers after a user requests the zip.php file again. This way, if a user changes his or hers query, we will be sure that we are displaying only the information relevant to the current request and we wont have any trash from the previous requests. In line 26 we define a flag as boolean to use it later to display error information and redisplay the center of the map.

In line 28 we loop through the information we received in response. If an error was found, we break our loop and we display and alert according information to the user. We also set the flag to false to redisplay center of the map later in the code. This would be lines 29 to 34.

In lines 35 to 39 we put together the HTML code which we will use to display the information about the branches we are going to display on the map.

In lines 40 to 43 we define two variables lat and lng and use them to instantiate GLatLng object which we define as point variable. In line 44 we define marker variable as an instance of GMarker object and in lines 45 and 46 we add it to the arrays we defined earlier. In line 47 we append the description to the container we need to define in our HTML and in line 47 we add markers to the map. In line 48 we extend the bounds of our map by using a method extend() of GLatLngBounds object we defined earlier. This amazing functionality of google maps will let us display a square with all our markers and google map will take care of setting the correct zoom level.

In lines 49 to 51 we add a listener which will be triggered on a click event and will display the description in an info cloud. In line 52 we close the loop and in line 54 we append the first description to the closest_location container. To assure that the first description is really the closest place to the zip code provided by the user, you cannot forget about putting the “ORDER BY distance ASC” in the php code of zip.php file.

In line 56 we set the zoom of our map using our bound object I was mentioning before by utilizing getBoundsZoomLevel method of GMap. As you can see in the description in line 57, if our php code did not return any results, we override the zoom level we defined in line 56 be setting it again to the default value (line 59). On the other hand, if our php code returned any results we set the center of the map using our bounds object again (line 61).

The last part of this code is just a listener which is triggered when a user clicks on the pseudo link show. We retrieve the id of this link and display the according info window on the map.

That would be it. The code is done. I know it is not perfect and accurate either. You can still use it in many different ways. It does not necessarily need to be a zip code search. Using it you can display distances between users and any other stuff connected with distances. In the second part I will show you how you can make this code a little bit more accurate using google maps build in api to show the directions, how to get from the zip code provided by the user to one of the company branches.

If you do not want to copy all the code, here is a zip package for you with working files.

One thing we need to make a decision about before we will start coding is when we should use the Haversine formula and when we should display the markers according to the borders of the map. According to this study, using the Haversine formula in a web query on a MySQL database with 800k entries might take up to 8 seconds. Therefore it will be crucial to split our jQuery code into requests concerning retrieving the data based on the Haversine formula and data within the borders of the map. In this example I won't give a complete walk through of how to measure the distance between two points (it will probably be a good subject for another example). In this example I will only show how to display data on an "moveend" event.

Let's take a look at the code. In line 1, we are executing the code after the document is loaded. I would consider it a standard procedure in writing unobtrusive JavaScript. In line 2, we define our map container, which corresponds with a HTML tag whose id equals map. In line 3, we are checking if the user’s browser is compatible with Google Map API and if it is, and our map container also exists, we can finally execute the rest of the code.

In line 5, we are instantiating our Google map and in lines 6 and 7 we are defining some controls for our map, the center (GLatLng) and zoom level (14). In line 9, we would have our code to measure the distance from given zip code and to display the markers on our map. The most interesting part of our code starts in line 14. We add a listener, which triggers on "moveend" event. In line 15, we use the getBounds() method, which returns GLatLngBounds object for us. In lines 16 to 19, we use getSouthWest() and getNorthEast() methods of our GLatLngBounds objects. This methods return GLatLng object, therefore we can directly use its methods to retrieve the geographical lengths of our south west and northeast corner. The last part is pretty simple, and I will leave it to you to adjust it to your needs. In line 20, we use the AJAX request, and we pass all geographical lengths to our php file. We assume that the response will be a valid json_encode() representation of the data retrieved from the database, and in lines 21 to 23, we add our markers to the map.

Here is the code you have been waiting for:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(document).ready(function() {  
  var mapContainer = $('#map')[0];
  if (GBrowserIsCompatible()) {
    if (mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);
      map.setCenter(new GLatLng(52.519015140666,13.419671058654785), 14);
 
      $('#submit').click(function() {
 
        // here goes the code handling calculatig of distance
        // truncated because it is not a part of this post
 
        GEvent.addListener(map, "moveend", function() {
          var bounds = this.getBounds();
          var swLat = bounds.getSouthWest().lat();
          var swLng = bounds.getSouthWest().lng();
          var neLat = bounds.getNorthEast().lat();
          var neLng = bounds.getNorthEast().lng();
          $.getJSON('helper.php', { swLat: swLat, swLng: swLng, neLat: neLat, neLng: neLng }, function(data) {
            var point = new GLatLng(data.lat, data.lng);
            var marker = new GMarker(point);
            map.addOverlay(marker);
          });
        });
      });	
    }
  }
});

You might ask why we are placing this code inside of jQuery's click event? The answer is simple. This way we can prevent triggering the "moveend" event, before a user uses the form. Only after he or she uses the form, our listener will react to the user's interaction with the map.

Another question might be, why we are not using GBounds.extend() method to adjust the zoom level? An answer for this question is as simple as the last one. We already defined the zoom level by passing the geographical lengths of our rectangle to the php file and since we triggered "moveend" event, we always have an actual part of the map, which a user is seeing at the point of triggering it.

I hope you will like this example. I did not want to provide the whole code for this example, because first of all I wanted to split it into two entries and second of all, I did not want to provide an example which you can copy and past, but rather give a solution for a certain problem and possibility start a discussion about doing it better. Have fun with this one.

To see, how our final solution will look like, go here

1. Geo Class - Geo.class.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

class Geo
{
 
    private $xml;
 
    protected function _init()
    {
        $this->xml = simplexml_load_file('geo.xml', 'SimpleXMLElement');
    }
 
    public function getDropDown($id, $option = array())
    {
        $this->_init();
 
        $select = '<select name="' . $id . '" id="' . $id . '">';
 
        if ($option['include_custom'] != '')
            $select.= '<option value="" selected="selected">' . $option['include_custom'] . '</option>';
 
        foreach ($this->xml->children() as $child) {
            $select.= '<option value="' . $child->name . '">' . $child->name . '</option>';
        }
 
        $select.= '</select>';
 
        return $select;
    }
 
    public function getLocation($identifier)
    {
        $this->_init();
 
        $coordinates = array();
 
        foreach ($this->xml->children() as $child)
            if ($child->name == $identifier) {
                $temp = explode(',', $child->Point->coordinates);
                $coordinates = array(
                                    'lat' => $temp[0],
                                    'lng' => $temp[1]
                );
            }
 
        return $coordinates;
    }
}

It wasn't really necessary to put this functions into a class, but it is just a habit We define a protected function _init(), which we call every time we want to use our KML file to retrieve information out of it. The function simplexml_load_file initializes an SimpleXMLElement object for us, which we can use later. The function getDropDown with the first mandatory argument and the second optional will be responsible for displaying the drop down field for us. I think I don't need to explain it in detail. The last function getLocation will retrieve the latitude and longitude from KML file. So let's move to index.php file, which will be the core of this example.

2. Core file - index.php

1
2

include('Geo.class.php');
$geo = new Geo();

Before we send any headers we include our Geo.class.php file and initialize our Geo class. After that goes the usual tag tags and the google maps and jQuery scripts. In the section of our document goes the actual jQuery part.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

$(document).ready(function() {  
  var mapContainer = $('#map')[0];
  var markerStart;
  var markerEnd;
  if(GBrowserIsCompatible()) {    
    if(mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);  
      map.setCenter(new GLatLng(52.519015140666,13.419671058654785), 14);
 
      $('#start').change(function() {
        var location = $(this).val();
 
        if (location == '')
          return;
 
        $.getJSON('helper.php', { location: location }, function(data) {
          if (markerStart)
            map.removeOverlay(markerStart);
 
          pointA = new GLatLng(data.lat, data.lng);
          markerStart = new GMarker(pointA);
          map.addOverlay(markerStart);
        });
      });
 
      $('#end').change(function() {
        var location = $(this).val();
 
        if (location == '')
          return;
 
        $.getJSON('helper.php', { location: location }, function(data) {
          if (markerEnd)
            map.removeOverlay(markerEnd);
 
          var blueIcon = new GIcon(G_DEFAULT_ICON);
          blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
          var markerEndOptions = { icon: blueIcon };
 
          pointB = new GLatLng(data.lat, data.lng);
          markerEnd = new GMarker(pointB, markerEndOptions);
          map.addOverlay(markerEnd);
        });
      });
 
      $('#submit').click(function() {
        if (window.pointA === undefined || window.pointB === undefined) {
          alert("You need to choose start and end");
          return;
        }
 
        var directions = new GDirections(map);
        route = Array(pointA, pointB);
 
        GEvent.addListener(directions, 'load', function() {
          var dist = directions.getDistance().html;
          $('#distance').html(dist);
        });
 
        directions.loadFromWaypoints(route);
      });
    }
  }
});

Maybe it is long but pretty straight forward. As you can read in my other examples, we first initialize jQuery, so it starts after our document is loaded. After that we define our map container and our markers. After we check if our browser is compatible and our map container exists, we initialize the map with couple options (large controls, zoom level = 14 and the center of the map).

We add two event listeners, which are triggered on onchange event of our drop downs (with id start and end respectively, the html code will follow). If you use the $option parameter in getDropDown function for displaying custom blank option, we check if the user chose this option and return false if he did. If he chose a valid option, we use an AJAX request and retrieve the geolocation from our helper file.

After our call returns some data, we check, if we have already any markers saved in our map and if we do, we first remove them and then place a new marker according to the option chosen in the drop down.

We repeat the same for the drop down with id 'end'. Actually we could have put this two events into a separate function, but to make this example clear I purposely didn't do that.

The last event listener is triggered, when a user clicks on a 'calculate route' button. First we check, if both points were placed by the user, and if not we display an alert, that he or she has to provide valid starting and ending point. This check might not work in IE, therefore you might need to do some changes, so it also works in IE.

We initialize GDirections Class and define our route with starting and ending point. I also use the getDistance method to display the amount of kilometers between this two points. As the last thing we need to do is to display the directions on the map and voila, we are done

What we still need it the rest of index.php file and our helper, and KML file.

1
2
3
4
5
6
7

<div id="navigation">
        Start <?php echo $geo->getDropDown('start', array('include_custom' => 'please choose...')); ?>
        Stop <?php echo $geo->getDropDown('end', array('include_custom' => 'please choose...')); ?>
        <input type="button" name="submit" id="submit" value="calculate route" />
</div>
<div id="distance"></div>
<div id="map" style="width: 1000px; height: 600px;"></div>

Pretty straight forward. We display our navigation with an empty option 'please choose...', the 'calculate route' button and containers for distance and map.

3. Our helper - helper.php

1
2
3

include('Geo.class.php');
$geo = new Geo();
echo json_encode($geo->getLocation($_GET['location']));

Pretty simple, isn't it Just initialize the class and call the method to retrieve location with the location argument used in the _GET request.

4. KML file - geo.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
  <Placemark>
    <name>Alexanderplatz</name>
    <description>Center of Berlin</description>
    <Point>
      <coordinates>52.52238370531909,13.409671783447266</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Frankfurter Tor</name>
    <description>A nice place to live</description>
    <Point>
      <coordinates>52.51595970749194,13.4527587890625</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Warschauerstr.</name>
    <description>Place to go and spend some time with friends</description>
    <Point>
      <coordinates>52.508568336719854,13.451085090637207</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Revelerstr.</name>
    <description>Cassiopeia Club</description>
    <Point>
      <coordinates>52.50721006978328,13.457050323486328</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Frankfurter Allee</name>
    <description>Shopping Center</description>
    <Point>
      <coordinates>52.513818166144006,13.474087715148926</coordinates>
    </Point>
  </Placemark>
</kml>

It is a file I prepared by myself. As far as I know, you can create them using the Google Earth application. Probably they can be way more complex than this one. But I guess it will be a nice subject for next example Good luck with this one and as usually, in case of any question, you know how to find me. Cheers!

In our example we will use two file types - PHP and XML. Our PHP file will be responsible for saving the user input in XML file and displaying the google map with all saved markers. Our XML file will be basically a place, where we will save all the markers saved by an user. It is worth to mention that you can easily replace the XML file with any kind of a database. If you do so, you will for example have possibility to approve each marker saved on your page. Additionally, if you have some kind of authentication system on your site, you can also save according username of a person who placed a marker on your site and provide some kind of statistics for your users. It's up to you, how you will use this code.

After some initial explanation we can move to our PHP file. Let's start with the header of our file:

1. PHP file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

if (isset($_POST['submit'])) {
  $fh = file_get_contents('markers.xml');
 
  try {
    $xml = new SimpleXMLElement($fh);
  } catch (Exception $e) {
    echo $e->getMessage();
  }
 
  $marker = $xml->addChild('marker');
  $marker->addAttribute('lat', $_POST['lat']);
  $marker->addAttribute('lng', $_POST['lng']);
  $marker->addAttribute('msg', utf8_encode($_POST['msg']));
  $marker->addAttribute('name', utf8_encode($_POST['name']));
  $marker->addAttribute('link', utf8_encode($_POST['link']));
 
  $fp = fopen('markers.xml','w');
  fwrite($fp, $xml->saveXML());
  fclose($fp);
  header('Location:index.php');
}

We use PHP function file_get_contents() to load the content of our XML file. Our XML file would be an empty XML file with markers element, which will be a holder for our markers. We initialize a PHP build in class SimpleXMLElement with our file and catch an exception if any error occur. If our user clicks on a save button (the code of this form will follow) we create a child element with according attributes and then save it as a new XML file.

This way we will add new markers to our XML file without loosing any previous information saved in our XML file. After our file is saved we redirect our user to the index page to prevent reloading of the page and saving multiple markers with the same information. I know it is not the cleanest way to do that, but it is just an example which should serve as a blueprint for your code.

You can notice that I use utf8_encode() function to encode our user input into correct charset. Because I encountered major problems with foreign characters and our final solution should work for standard characters as well as for special characters, that is a necessary step to handle this problem. The only thing you should keep in mind is to set the charset of your site to UTF-8.

Don't forget to put that code before the head section of your PHP file, because otherwise you will get an error that the header were already send.

Let's take a look at our jQuery function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

$(document).ready(function() {
 
  var mark;
  var pointA;
 
  if (GBrowserIsCompatible()) {
    var m = $("#map")[0];
 
    if(m) {
 
      var map = new GMap2(m);
      var start = new GLatLng(63.13450320833446,16.69921875);
      var zoomLevel = 5;
      map.setCenter(start, zoomLevel);
      map.addControl(new GSmallMapControl());
 
      $.get('markers.xml',function(data) {
        $(data).find('marker').each(function(){
          var lat    = $(this).attr('lat');
          var lng    = $(this).attr('lng');
          var html   = $(this).attr('name')+" ";
          html      += $(this).attr('msg')+" ";
          html      += $(this).attr('link');
          var point  = new GLatLng(lat,lng);
          var marker = new GMarker(point);
 
          map.addOverlay(marker);
 
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
 
        });
 
      });
 
      GEvent.addListener(map, 'click', function(overlay, point){
        if(mark) {
          map.removeOverlay(mark);
        }
        if(point) {
          pointA = new GPoint(point.x, point.y);
          mark = new GMarker(pointA);
          map.addOverlay(mark);
          map.getCenter(point);
          var lat = point.y;
          var lng = point.x;
          var form = "
          <form action="\"index.php\"" method="\"post\"">" +
          "<input name="\"lat\"" type="\"hidden\"" value="\""+lat+"\"" />"+
          "<input name="\"lng\"" type="\"hidden\"" value="\""+lng+"\"" />"+
          "Name:
          <input name="\"name\"" type="\"text\"" value="\"\"" />"+
          "Msg:
          <input name="\"msg\"" type="\"text\"" value="\"\"" />"+
          "Link:
          <input name="\"link\"" type="\"text\"" value="\"\"" />"+
          "<input name="\"submit\"" type="\"submit\"" value="\"save\"" />"+
          "</form>";
          map.openInfoWindowHtml(point,form);
        }
      });
    }
  }
});

In the first part we declare two variables pointA and mark which will later serve to retrieve the longitude and latitude of our marker. We will also reduce the ability of a user to place several markers at the same time.

We check if our browser is compatible with google maps and we look for a place holder for our map. If both of the conditions are fulfilled we display our map and use AJAX request to display all the markers saved in our XML file. We also add an event listener which is triggered every time a user clicks on an existing marker. If it is a case, we display an info cloud with information saved by the user.

In the second part of our function we add another event listener, which is triggered every time a user places a new marker. In our info cloud we will display a form which I mentioned before and save the longitude and latitude in hidden fields. After our user clicks a save button the information from the form will be processed by our PHP file which will create another marker and display it on our google map.

The last part is our XML file:

2. XML file:

1
2
3
4

<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="64.4348920430406" lng="15.205078125" msg="Msg" name="Name" link="yes!"/>
</markers>

As I said before this example is just a blueprint and should be extended by user input validation. As I also said before, you don't really need to use XML file and you can also implement an approval system of each marker placed on your site. You will have to save your information in a database though. You can use my post about displaying a simple navigation to get the idea, how to create an XML file based on information you retrieve from database. I hope this will be helpful. I'm waiting for your feedback.

If you want to see a working demo of this example just click here.

Detailed description of jQuery code you can find in my previous post about setting boundaries for google map with more markers using jquery, therefore in this example I will only cover the parts of the code, which weren't explained in previous post. Let's take a closer look at the code, which will generate an XML document. You need to place this code in a separate file, which in our case will be xml.php.

You can create your XML document on many different ways. I will show you here an easy and a nice way, how to do that. Let's start with the nice way, which uses DomDocument class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$db_host = "localhost";
$db_user = "user";
$db_pass = "pass";
$db_name = "dbname";
 
$connect=mysql_connect($db_host, $db_user, $db_pass) or die ("No connection to DB");
mysql_select_db($db_name) or die("No connection to DB");
 
$dom = new DomDocument('1.0','UTF-8');
$element = $dom->createElement('markers');
$dom->appendChild($element);
 
$sql = mysql_query("SELECT * FROM google_address");
 
while($row = mysql_fetch_assoc($sql)) {
  $marker = $dom->createElement('marker');
  $element->appendChild($marker);
  $marker->setAttribute('lat',$row["lat"]);
  $marker->setAttribute('lng',$row["lng"]);
  $marker->setAttribute('link',utf8_encode($row["link"]));
  $marker->setAttribute('desc',utf8_encode($row["desc"]));
}
 
echo $dom->saveXML();

All the information we are using in this example is stored in MySQL database, therefore we will start with connecting to MySQL database. You will need to create a table with at least four fields (lat, lng, link and desc). The first two fields represent geographical lengths, the third one represents the link name, which will be later displayed in the navigation and the fourth field represents description, which will be later displayed in our info window.

After that we create an instance of our DomDocument class and initialize it with the XML version and set the default encoding (In our case version 1.0 with encoding set to UTF-8). After that we create an element called markers, which will be a root element for our markers and insert it as a child into our XML document.

After that we select all element from our MySQL table and loop through them. In our loop we first create a new element called marker, append it as a child into our root element and set the necessary attributes. After our loop is done with all the results we just echo our XML document using saveXML method. This example only shows, how to display all results from database. In your AJAX request you can pass some attributes to filter the data.

The easier method is based on creating a file called coordinates.xml. You will need to place this code before you do your AJAX request, because otherwise you will get 404 error.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$db_host = "localhost";
$db_user = "user";
$db_pass = "pass";
$db_name = "dbname";
 
$connect=mysql_connect($db_host, $db_user, $db_pass) or die ("No connection to DB");
mysql_select_db($db_name) or die("No connection to DB");
 
$sql = mysql_query("SELECT * FROM google_address");
 
$text = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
$text .= "<markers>";
while($row = mysql_fetch_assoc($res)) {
  $text .= "<marker lat=\"".$row["lat"]."\" lng=\"".$row["lon"]."\" html=\"".$row["description"]."\"  label=\"".$row["street"]."\" />\n";
}
$text .= "</markers>";
 
$file = "coordinates.xml";
$fh = fopen($file, "w");
fputs($fh, $text);
fclose($fh);

This way you just create a string, which you put in an XML file. I don't think that this method needs a further explanation. It's disadvantage is that you cannot really pass any attributes to filter the data.

And finally, what you've been waiting for, our jQuery code for this example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

$(document).ready(function() {
 
  var mapContainer = $("#map")[0];
  var bounds = new GLatLngBounds();
  var markers = [];
  var descs = [];
  var navi ='';
  var i = 0;
 
  if (GBrowserIsCompatible()) {
 
    if(mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);
      map.addControl(new GMapTypeControl);
      map.addControl(new GScaleControl);
      map.setCenter(new GLatLng(0,0),0);
    }
 
    $.get('xml.php',function(data) {
      $(data).find('marker').each(function(){
        var lat    = $(this).attr('lat');
        var lng    = $(this).attr('lng');
        var link   = $(this).attr('link');
        var desc   = $(this).attr('desc');
        var point  = new GLatLng(lat,lng);
        var marker = new GMarker(point);
        markers[i] = marker;
        descs[i] = desc;
        navi += '<div class="click" id="'+i+'">'+link+'</div>';
        map.addOverlay(marker);
        bounds.extend(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(desc);
        });
        i++;
      });
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
      $('#navi').html(navi);
      $('.click').click(function() {
        var id = $(this).attr('id');
        markers[id].openInfoWindowHtml(descs[id]);;
      });
    });	
  }		
});

The only difference between this and my previous code is that we save all markers and descriptions in an array and create a string, which we use to display our navigation. After our loop is done with the markers provided by xml.php file, it displays the navigation. We also add an event listener, which is triggered, after our visitor clicks on the navigation link. When the even is triggered an information window will be displayed above according marker.

The only thing, which you need to make this code work is the HTML code:

1
2

<div id="map" style="width:1000px; height:650px;float:left;"></div>
<div id="navi"></div>

That's all. I hope this code will help you to make your site more interesting for your visitors. Have fun with it.

One of the classes available in second version of google maps is GLatLngBounds. Instantiating this class constructs a rectangle in geographical lengths. One of the methods, called 'extend' allows us to extend this rectangle to get a perfect zoom level. It means that every time our loop will display a new marker, we will call 'extend' method, which will additionally extend the boundaries of the rectangle, so it contains that given point. An additional functionality, which will be covered by this function is an event listener, which will display info window when a user clicks on one of the markers. At the end we will set the zoom level using one of the methods (getBoundsZoomLevel()) from another class, which can be called though, without instantiating it and use the getCenter() method from GLatLngBounds to get the center of our map.

To save us some time, I decided to skip the part where we are creating our XML document, which contains all necessary information (latitude, longitude and text for info window) to display our markers, therefore if you need that part to be covered as well, just let me know. Let's take a closer look at our code:
[source:javascript]
$(document).ready(function() {
//our map container and instance of GLatLngBounds
var mapContainer = $("#map")[0];
var bounds = new GLatLngBounds();

//if browser is compatible
if (GBrowserIsCompatible()) {
//if div with given id was found
if(mapContainer) {
//instance of the GMap2 and some controls
var map = new GMap2(mapContainer);
map.addControl(new GLargeMapControl);
map.addControl(new GMapTypeControl);
map.addControl(new GScaleControl);
map.setCenter(new GLatLng(0,0),0);
}
//AJAX request
$.get('coordinates.xml',function(data) {
//we are looking for all marker and looping through them
$(data).find('marker').each(function(){
//serializing some data from the request
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
var desc = $(this).attr('desc');
var point = new GLatLng(lat,lng);
var marker = new GMarker(point);

//new marker
map.addOverlay(marker);
//extending the boundaries
bounds.extend(point);
//and the info window
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(desc);
});

});
//setting the zoom level and the center
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
});

}

});
[/source]
I hope everything is clear. In case of any question just use the comment or contact form. One more thing left to show. Here is the content of xml file:
[source:xml]







[/source]

private $url = array();

}
[/source]
We define private array url, in which we will store URLs prepared for cURL request. Let's build a contructor.
[source:php]
class Geolocation {

private $url = array();

function __construct($file) {
$gmapkey = "YOURKEY";
$address = file($file);
foreach($address as $addres) {
$this->url[] = "http://maps.google.com/maps/geo?q=".urlencode($addres)."&output=csv&key=".$gmapkey;
}
}
}
[/source]
You need to replace $gmapkey with the key you can sign for at google. Our __constructor reads the text file and saves each line in an array. We then loop through this array and initialize URLs.

In the next method we will loop through the addresses to retrieve the geolocation.

[source:php]
class Geolocation {

private $url = array();

function __construct($file) {
$gmapkey = "YOURKEY";
$address = file($file);
foreach($address as $addres) {
$this->url[] = "http://maps.google.com/maps/geo?q=".urlencode($addres)."&output=csv&key=".$gmapkey;
}
}
public function getLatLng() {
$i=1;
foreach($this->url as $urls) {
$cinit = curl_init();
curl_setopt($cinit, CURLOPT_URL, $urls);
curl_setopt($cinit, CURLOPT_HEADER,0);
curl_setopt($cinit, CURLOPT_USERAGENT, $_SERVER["HTTP_USER_AGENT"]);
curl_setopt($cinit, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($cinit, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($cinit);
curl_close($cinit);

if(strstr($data,"200")) {
$data = explode(",",$data);
echo $i.": ";
$zoom = $data[1];
echo $lat = $data[2];
echo $lon = $data[3]."
";
}

/*
$sql = "INSERT INTO..."
$res = mysql_query($sql);
echo ($res) ? $i.": lat:".$latitude." lon: ".$longitdue." -- OK
" : $i.": ERROR
";
*/
$i++;
}
}
}
[/source]
You can either echo the results or just save them in your MySQL database. You can also make multidimensional array and save some extra information about the certain place.

Let's take a look at how you should use this class.
[source:php]
include('geolocation.class.php');
$geo = new Geolocation('address.txt');
$geo->getLatLng();
[/source]
Basically you need to include the class, initialize it with the name of the file you want to use and getLatLng will do the magic for you. This class is pretty old and you may encounter one problem using it. After 10th request I started to receive the same geolocation for different places. What you can do is to put the foreach loop to sleep for 2 seconds and it should be fine. That's why I actually use iterator in this function. You basically need to add this line right after the loop starts.
[source:php]
if($i%10 == 0) sleep(2);
[/source]

Here is the content of the text file:
[source:html]
Berlin, Dieffenbachstr. 38
Berlin, Cuvrystr. 32
Berlin, Lasdehner Str. 30
[/source]
Basically one address per line. That would be all, have fun with playing and extending this class.

You can also see working demo here

Let's start with including some necessary libraries. I know this might be obvious for almost all of you, but I want to make it as clear as possible for each one of you reading this post. Please add this two lines in the head section of your document. Please don't forget that we will use v2 of GMap in this example. You can download the jQuery library from their official site www.jquery.com. To get the google Maps API key for you your site, you should go to this address and you can sign up for a key for free.

1
2

<script src="jquery.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOURKEY" type="text/javascript"></script>

You can also include the latest jQuery library directly from their site adding this code in the header of your document.

1

<script src="http://code.jquery.com/jquery-latest.js"></script>

I don't wont to discuss the advantages or disadvantages of both methods but if you want to know more about it you should check the cache possibilities of your browser. In our example I will use the latest code available from jQuery site.

Let's start to break my code into pieces and explain what it does. First we will define a ready event to our page and declare some global variables which we will use later in our function, so the code defined in the ready event will be executed after the DOM will be loaded. You need to place this code in the head section of your document.

1
2
3
4
5

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
});

The first thing we need to do is to check if the client's browser is compatible with google maps at all. If this check returns true, we use jQuery to define a place holder for our map. In our case it will be a div tag with an id map. We also assume in this example that it will be the first element in our DOM. We will use Berlin as our example city. If jQuery finds our place holder it initializes the GMap and displays it in our div tag. We set the longitude and latitude in the center of Berlin and we are defining a default zoom level. We add some controls to allow our user to manipulate the map and we we are done with the first step of just displaying the map without including the onload even in the body tag of our document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        if(m) {		
            var map = new GMap2(m);
            var start = new GLatLng(52.519563,13.414306);
            var zoomLevel = 10;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
        }
	}
});

In the next step we want to give our user a possibility to choose the location by simply reading his' or hers' input. To accomplish this task we add an event listener, which will be triggered when a user clicks on our map. First we perform a check if a marker doesn't exist on our map and if it does we remove. After that we check if a point is defined and if it is we add an overlay, which displays the marker and save the latitude an longitude in our hidden input fields (the HTML code for this example will be shown at the end). We will need this information later to save it in the database.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        if(m) {		
            var map = new GMap2(m);
            var start = new GLatLng(52.519563,13.414306);
            var zoomLevel = 10;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
            GEvent.addListener(map, 'click', function(overlay, point){
                if(mark) {
                    map.removeOverlay(mark);
                }
                if(point) {
                    pointA = new GPoint(point.x, point.y);
                    mark = new GMarker(pointA);
                    map.addOverlay(mark);
                    map.getCenter(point);
                    $('#lng').attr('value',point.x);
                    $('#lat').attr('value',point.y);
                }
            });
        }
    }
});

In the last step we add an event listener, which will be triggered when a user use our drop down menu to choose a district. As I stated before, a user has a form to fill out where he is forced to choose the district of a city. We will use AJAX to retrieve this information from an external php file (map_district.php) to get the geographical location of the districts. It splits the string, which it gets and performs a check, if a marker exists already or not. After that it adds a marker to the map, increases the zoom level and overwrites the location in hidden input tags.

(How to determine the longitude and latitude of a certain place for free, you can read another example of mine here .)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        if(m) {		
            var map = new GMap2(m);
            var start = new GLatLng(52.519563,13.414306);
            var zoomLevel = 10;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
 
            GEvent.addListener(map, 'click', function(overlay, point){
                if(mark) {
                    map.removeOverlay(mark);
                }
                if(point) {
                    pointA = new GPoint(point.x, point.y);
                    mark = new GMarker(pointA);
                    map.addOverlay(mark);
                    map.getCenter(point);
                    $('#lng').attr('value',point.x);
                    $('#lat').attr('value',point.y);
                }
            });
            $('#city').change(function(){
                var district = 'district='+$(this).val();
                $.ajax({
                    type: 'POST',
                    data: district,
                    url: 'map_district.php',
                    success: function(r) {
                        var cord = r.split("|");
                        if(mark) {
                            map.removeOverlay(mark);
                        }
                        pointB = new GLatLng(cord[0],cord[1]);
                        mark = new GMarker(pointB);
                        map.addOverlay(mark);
                        map.setCenter(pointB, 14);
                        $('#lat').attr('value',cord[0]);
                        $('#lng').attr('value',cord[1]);
                    }
                });
            });
        }
    }
});

This way even if a user will try to erase a marker, we will still have an information about the last placed marker, which we can save in our database. Last thing I need to mention is the content of php and html files.

I will just reduce this example to two districts, but you can add as many as you want. Basically we call this php file in our AJAX request and use POST method to retrieve the location, which we later use to place a marker.

if($_POST['district']=="Charlottenburg") {
    $lat = "52.51120638909939";
    $lng = "13.299808502197266";
} elseif($_POST['district']=="Friedrichshain") {
    $lat = "52.51360922969275";
    $lng = "13.442888259887695";
}
echo $lat."|".$lng;

In the body section of your document you need to place simple drop down list, a div tag with id map and two hidden input fields.

1
2
3
4
5
6
7

<select name="city" id="city">
    <option value="Charlottenburg">Charlottenburg</option>
    <option value="Friedrichshain">Friedrichshain</option>
</select>
<div id="map" style="width:400px;height:400px;"></div>
<input type="hidden" id="lng" name="lng" value="" />
<input type="hidden" id="lat" name="lat" value="" />

That's all. If you want to download the files you can do it here. I'm waiting for your feedback.