Please wait for 15 seconds...

Saturday 12 July 2014

Few days ago I wrote a tutorial Simple Visitor Geo Tracking System and thank you guys for your response. Today I am going to explain you, how to display visitor’s geo location in real time in Google Map. I am using here Simple Visitor Geo Tracking System, Google Geocoding API, Google Maps Javascript V3 API. Right now version 3 is latest version for Google Maps Javascript API and I am using it here.

First go to and creat a project for Google Maps API. In the left in API’s menu enable Google Maps JavaScript API v3 and Geocoding API. Create API key for website server.

For user geo location I am using here Simple Visitor Geo Tracking System. Please visit to this link and install it on your server. After that create a PHP file show_map.php and copy n paste below code in it.



mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) OR die(mysql_error());
mysql_select_db(DB_NAME) OR die(mysql_error());

$long = sprintf('%u', ip2long($ip));
$sql = "SELECT * FROM `geo_ips` WHERE '$long' BETWEEN `ip_start` AND `ip_end`";
$result = mysql_query($sql);
$ip_detail = mysql_fetch_assoc($result);

// Using Google Geocoding API for visitor longitute and latitute
// Google Geocoding API is more precise for latitide and longitude

$google_api_key = "GOOGLE_API_KEY";
$location =  $ip_detail['city'].", ".$ip_detail['state'].", ".$ip_detail['country'];
$url = "".urlencode($location)."&key=".$google_api_key;

$geo = json_decode(my_curl($url), true);
$lat = $geo['results'][0]['geometry']['location']['lat'];
$lng = $geo['results'][0]['geometry']['location']['lng'];

function my_curl($url){
    $ch = curl_init();
    $timeout = 10;
    curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
    $data = curl_exec($ch);
    return $data;

include 'show_map.html';

Replace database credentials and Google API key with yours.

You were thinking why I am fetching Google Geocoding data by CURL when I can use its javascript version which would be much easier. In my experience gives you more accuracy than its javascript version.

Make sure that you have successfully installed Simple Visitor Geo Tracking System and it is running.

Now create show_map.html and copy n paste below code in it.



<!DOCTYPE html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Show Visitor Location in Real Time in Google Map</title>
<div class="main">
<div><h3>Your location is <?=$location?> powered by</h3></div>
<div><h3>Your latitude is <?=$lat?> and longitude is <?=$lng?></h3></div>
<div id="visitor_map"></div>


<script type="text/javascript" src="js/jquery.min1.11.1.js"></script>
<script type="text/javascript" src="<?=$google_api_key?>"></script>
<script type="text/javascript">
var option = {
 center: new google.maps.LatLng(<?=$lat?>, <?=$lng?>),
 zoom: 10
var map = new google.maps.Map(document.getElementById("visitor_map"), option);

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?=$lat?>, <?=$lng?>),
        map: map
  var info_data = "<?=$location?>";
  var infowindow = new google.maps.InfoWindow({
content: info_data
  });, marker);
  google.maps.event.addListener(marker, 'click', function() {,marker);


<style type="text/css">

Everything is set. Open show_map.php in your browser and watch your location in Google Map.

Posted by Atul


Post a Comment

Techsirius on Facebook