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 console.developers.google.com 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.

show_map.php


PHP

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

$ip = $_SERVER['REMOTE_ADDR'];
$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 = "https://maps.googleapis.com/maps/api/geocode/json?address=".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_URL,$url);
    curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
    $data = curl_exec($ch);
    curl_close($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 https://maps.googleapis.com/maps/api/geocode/json 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.

show_map.html


HTML

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

Javascript

<script type="text/javascript" src="js/jquery.min1.11.1.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&key=<?=$google_api_key?>"></script>
<script type="text/javascript">
$(document).ready(function(){
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
  });
  infowindow.open(map, marker);
 
  google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
});
});
</script>

CSS

<style type="text/css">
.main{
width:550px;
position:relative;
left:50%;
margin-left:-275px;
}
#visitor_map{
width:500px;
height:500px;
}
</style>

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


Posted by Atul

0 comments:

Post a Comment

Techsirius on Facebook