In the first part of this series I showed how you could get the country of a visitor via his IP address. Now with this precious information, I’ll show you how to map the visitor visually on the world map using Google Maps.
You must sign up for a Google Maps API key if you don’t already have one.
After signing up for the key, include the following code in the head of your page :
<script src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY" type="text/javascript"></script>
replacing the YOURKEY by the key you obtained.
We then define a container to hold our map with a width of 630px and height of 350px :
<div id="map" style="width:630px;height:350px;"></div>
Till now the overall code for the page, including the first part, is :
<?php
require_once("Net/GeoIP.php");
if (isset($HTTP_SERVER_VARS['HTTP_X_FORWARDED_FOR']) && eregi("^[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}$",
$HTTP_SERVER_VARS['HTTP_X_FORWARDED_FOR'])){
$ip = $HTTP_SERVER_VARS['HTTP_X_FORWARDED_FOR'];
}
else{
$ip = getenv("REMOTE_ADDR");
}
$geoip = Net_GeoIP::getInstance("./data/GeoIP.dat");
$country = $geoip->lookupCountryName($ip);
?>
<html>
<head>
<title>Google maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width:630px;height:350px;"></div>
</body>
</html>
Now begins the cool stuff, I’ll show you the complete javascript code and then explain afterwards.
var locator = {
addAddressToMap: function(response) {
locator.map.clearOverlays();
if (!response || response.Status.code != 200) {
//alert("Sorry, we were unable to geocode that address");
}
else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
locator.map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
}
},
load: function() {
if (GBrowserIsCompatible()) {
locator.map = new GMap2(document.getElementById("map"));
locator.map.setCenter(new GLatLng(34, 0), 1);
locator.geocoder = new GClientGeocoder();
locator.geocoder.getLocations("<?php echo $country; ?>", locator.addAddressToMap);
}
}
}
We have a nice JSON object with 2 functions in it, namely:
- load
- addAddressToMap
The load function
The load function will be called upon loading the page, it will initialize our map, and center it.
locator.map = new GMap2(document.getElementById("map"));
locator.map.setCenter(new GLatLng(34, 0), 1);
We then create an instance of the GClientGeoCoder class which will allow us to obtain geocodes for user specified addresses.
With the object created, we then call the getLocations method with 2 parameters. The first one is the country which we got from the php script and the second parameter being the callback function. In this case our callback function is addAddressToMap.
The addAddressToMap function
The addAddressToMap function is called when the geocoder returns an answer, with response as parameter. The response object contains various information such as the address and the coordinates for the country obtained via the getLocations method.
These coordinates can be accessed via
- response.Placemark[0].Point.coordinates[1] for longitude and
- response.Placemark[0].Point.coordinates[0] for latitude
To make things a bit short I’ve placed the response.Placemark[0] in a variable called place :
place = response.Placemark[0];
, thus the coordinates can be accessed via :
place.Point.coordinates[1] place.Point.coordinates[0]
With these 2 coordinates we create a marker which we’ll plot on the map :
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); marker = new GMarker(point); locator.map.addOverlay(marker);
As a bonus we also have a popup showing the country name using the openInfoWindowHtml method. We simply add the following line :
marker.openInfoWindowHtml(place.address);
our final PHP page looks like that :
<?php
require_once("Net/GeoIP.php");
if (isset($HTTP_SERVER_VARS['HTTP_X_FORWARDED_FOR']) && eregi("^[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}$",
$HTTP_SERVER_VARS['HTTP_X_FORWARDED_FOR'])){
$ip = $HTTP_SERVER_VARS['HTTP_X_FORWARDED_FOR'];
}
else{
$ip = getenv("REMOTE_ADDR");
}
$geoip = Net_GeoIP::getInstance("./data/GeoIP.dat");
$country = $geoip->lookupCountryName($ip);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>my ip address with Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var locator = {
addAddressToMap: function(response) {
locator.map.clearOverlays();
if (!response || response.Status.code != 200) {
//alert("Sorry, we were unable to geocode that address");
}
else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
locator.map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
}
},
load: function() {
if (GBrowserIsCompatible()) {
locator.map = new GMap2(document.getElementById("map"));
locator.map.setCenter(new GLatLng(34, 0), 1);
locator.geocoder = new GClientGeocoder();
locator.geocoder.getLocations("<?php echo $country; ?>", locator.addAddressToMap);
}
}
}
//]]>
</script>
</head>
<body onload="locator.load();" onunload="GUnload();">
<div id="map" style="width:630px;height:350px;"></div>
</body>
</html>
After the page has been loaded, we just call the locator.load() function which will initialize the whole process.
Leave a Reply