The html blog » google maps http://htmlblog.net The web sandbox of Asvin Balloo Wed, 07 Oct 2009 17:20:33 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Geolocate your visitors with PHP (part 2) http://htmlblog.net/geolocate-your-visitors-with-php-part-2/ http://htmlblog.net/geolocate-your-visitors-with-php-part-2/#comments Wed, 30 Jul 2008 11:30:08 +0000 asvin http://htmlblog.net/?p=26

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.

Sample preview.

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&amp;v=2&amp;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&amp;v=2&amp;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&amp;v=2&amp;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.

Live demo
Download sample demo

]]> http://htmlblog.net/geolocate-your-visitors-with-php-part-2/feed/ 12 Geolocate your visitors with PHP (part 1) http://htmlblog.net/geolocate-your-visitors-with-php-part-1/ http://htmlblog.net/geolocate-your-visitors-with-php-part-1/#comments Wed, 09 Jul 2008 15:04:31 +0000 asvin http://htmlblog.net/?p=19 geolocate

In this short post I'll show you how to geolocate your visitors with PHP. First of all let's have a look at what you'll need :

  • PEAR GeoIP
  • MaxMind GeoLite Country


Installing PEAR GeoIP
Using your console or using the command prompt type :

 
pear install http://download.pear.php.net/package/Net_GeoIP-1.0.0RC1.tgz
 

Obtaining MaxMind GeoLite Country
The database can be downloaded freely here. Download it and put it in the same folder where your script will reside.

The code

  1.  
  2. <?php
  3. 	require_once('Net/GeoIP.php');
  4.  
  5. 	$geoip = Net_GeoIP::getInstance('./GeoIP.dat');
  6. 	$ip = getenv('REMOTE_ADDR');
  7. 	$country = $geoip->lookupCountryName($ip);
  8.  
  9. 	echo "Hi, you're from ".$country;
  10. ?>
  11.  

Walkthrough
Now let's go through the lines of code. The first line tells us to include the GeoIP class, which we installed previously and then create a geoip object in line 5 from the database we downloaded.
Next, in line 6 we get the IP address of the visitor and finally we call the lookupCountryName method with the IP address as parameter in line 7 and it will return us the country.

The last line just outputs the country, for example, "Hi, you're from Mauritius". That's it, now you know where your visitor's from.

In the second part of this article I'll show you how to use the script to visually map your visitors using Google Maps. You can have a little preview of the script here.

]]> http://htmlblog.net/geolocate-your-visitors-with-php-part-1/feed/ 15