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';
?>
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>
<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>
<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>
.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.
0 comments:
Post a Comment