The first thing you need to do is to go to getpos.de and register a new account. Unfortunately this service is only in German, but I don't think you should have any problem with registering a new account. Let's take a look at our class:
[source:php]
class Geolocation {

private $ip;
private $xml_data;
private $xml;

public $geo;
public $error;

function __construct($ip) {
$this->ip = $ip;
$this->xml_data = simplexml_load_file("http://services.getpos.de/ip2loc.asmx/GetIPPosition?UserName=YOUR_USERNAME&Password=YOUR_PASSWORD&IPAddress=".$this->ip);
}

public function findGeo() {
if(!$this->xml_data) {
$this->error = "service unavailable";
return false;
}
$this->xml = new SimpleXMLElement($this->xml_data);
$this->RecurseXML($this->xml,$this->geo);
}

private function RecurseXML($xml,$vals,$parent=""){
$child_count = 0;
foreach($xml as $key=>$value) {
$child_count++;
$k = ($parent == "") ? (string)$key : $parent.".".(string)$key;

if($this->RecurseXML($value,$this->geo,$k) == 0)
$this->geo[$k] = (string)$value;
}
return $child_count;
}
}
[/source]
We define IP address, XML data and an instance of SimpleXMLObject as private properties and our error handler and actual geo data as public properties. In our constructor we pass IP address and we use simplexml_load_file function to interpret the XML file into an object. Obviously you need to replace YOUR_USERNAME and YOUR_PASSWORD with the information you will use to register at getpos.de. In findGeo() method we first check, if the service is available, and if not we show error message. If our service is available though, we instantiate SimpleXMLObject with the XML data. We than use RecurseXML() method to translate our object into a suitable array. The credit for RecurseXML() goes to transglobe at gmx dot de. I found this function in the comments section of PHP manual and changed it a little bit to suit our needs.

Let's take a closer look, how to use our class:
[source:php]
include("geolocation.class.php");
$geo = new Geolocation($_SERVER['REMOTE_ADDR']);

$geo->findGeo();
echo (isset($geo->error)) ? $geo->error : '';

echo "geo['returncode']:".$geo->geo['returncode']."
";
echo "geo['country.code']:".$geo->geo['country.code']."
";
echo "geo['country.name']:".$geo->geo['country.name']."
";
echo "geo['region.code']:".$geo->geo['region.code']."
";
echo "geo['region.name']:".$geo->geo['region.name']."
";
echo "geo['city']:".$geo->geo['city']."
";
echo "geo['position.longitude']:".$geo->geo['position.longitude']."
";
echo "geo['position.latitude']:".$geo->geo['position.latitude']."
";
echo "geo['returncode']:".$geo->geo['returncode']."
";
[/source]
We include our class and instantiate it with the remote address of a visitor. We than call findGeo() method, which will translate the IP address for us. We can than echo our results or just use them to display relevant information for our users. Obviously, if a user is connected through a proxy or some AOL users in Europe, who are connected through American servers, this class wont retrieve correct information. You need to take into consideration though, that about 65% of your visitors will get correct content. I hope it is clear enough. If you encounter any problems with this class please let me know. As mentioned before, it would be also nice if you could give me any feedback about the accuracy of this service.

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.