Sometimes we need to show to visitors of our sites where are they from. In one of my sites, I am using an widget or gadget or something like that to show the location of visitor in map by his/her IP address. I know there are several APIs and several sites offering this service for free or for some credit. For application specific reason I have used 'IPinfodb' api and jmap plugin for jquery. The details are listed as below.
Prerequisites :
1.) CURL or 'allow_url_fopen' be enabled in apache and php.ini
2.) Google or Yahoo map api key. [Here I have used google map]
3.) Download jquery.js file from here here.
4.) Download jmap polugin for jquery from here .
Steps :
(1.) Taking the visitor's IP address by
<?php
$remote_ip = $_SERVER['REMOTE_ADDR'];
?>
(2.) Now put the following code to call the API. It returns a formatted xml output.
$request_url = "http://ipinfodb.com/ip_query.php?ip=".$remote_ip;
$xml = simplexml_load_file($request_url) or die("url not loading");
(3.) If we print the variable $xml , we can find the returned xml structure. It is something like following -
SimpleXMLElement Object
(
[Ip] => [...The returned IP...]
[Status] => OK
[CountryCode] => BD
[CountryName] => Bangladesh
[RegionCode] => [... The Map Region Code ...]
[RegionName] => Dhaka
[City] => Dhaka
[ZipPostalCode] => SimpleXMLElement Object
(
)
[Latitude] => 23.7231
[Longitude] => 90.4086
[Gmtoffset] => 6.0
[Dstoffset] => 6.0
)
(4.) As from no#3 we find that this xml object is single dimensional. So we can access its attributes by simple object call. Thus the latitude and longitude can be derived by the following lines -
$lat = $xml->Latitude;
$lng = $xml->Longitude;
(5.) Now we will geocode the co-ordinates using 'jmap' plugin of jQuery and google map API. The following code do that all.
echo "
<script src=\"http://maps.google.com/maps?file=api&v=2&key=
[... ... Your google map API key ... ...]\" type=\"text/javascript\"></script>
<script src=\"js/jquery.js\" type=\"text/javascript\"></script>
<script src=\"js/jquery.jmap.min.js\" type=\"text/javascript\"></script>
<div id=\"map\" style=\"width: 640px; height: 480px\" align=\"center\"></div>
<script type=\"text/javascript\">
(function($){
$('#map').jmap('init', {mapCenter:[".$lat.",".$lng."]}, function(el,
options){
$(el).jmap('addMarker', {pointLatLng:[".$lat.",".$lng."], pointHTML:
\"<div style='height:25px;width:200px;font-weight:bold;padding:5px;text-align:center;'>".
'[... ... The Text You want to display when people click on the marker ... ...]'."<br></div>\"});
});
})(jQuery);
</script>
";
(6.) So the final code for the page / gadget /widget is as follows:
<?php
$remote_ip = $_SERVER['REMOTE_ADDR'];
$request_url = "http://ipinfodb.com/ip_query.php?ip=".$remote_ip;
$xml = simplexml_load_file($request_url) or die("url not loading");
$lat = $xml->Latitude;
$lng = $xml->Longitude;
echo "
<script src=\"http://maps.google.com/maps?file=api&v=2&key=
[... ... Your google map API key ... ...]\" type=\"text/javascript\"></script>
<script src=\"js/jquery.js\" type=\"text/javascript\"></script>
<script src=\"js/jquery.jmap.min.js\" type=\"text/javascript\"></script>
<div id=\"map\" style=\"width: 640px; height: 480px\" align=\"center\"></div>
<script type=\"text/javascript\">
(function($){
$('#map').jmap('init', {mapCenter:[".$lat.",".$lng."]}, function(el,
options){
$(el).jmap('addMarker', {pointLatLng:[".$lat.",".$lng."], pointHTML:
\"<div style='height:25px;width:200px;font-weight:bold;padding:5px;text-align:center;'>".'
[... ... The Text You want to display when people click on the marker ... ...]'."<br></div>\"});
});
})(jQuery);
</script>
";
?>
(7.) Now save the file and host it to server. Whenever you open the page you can find the map and your location is marked in the map.
Opinions and easier ways if there are cordially welcome.
