- SPLessons

Geo Location based on IP Address with P...

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Geo Location based on IP Address with PHP jQuery

Geo Location based on IP Address with PHP jQuery

 

Description: Hi every one, today we are going to see how to get Geo Location based on IP address with PHP, jQuery, and we will integrate that Geo Location with Google maps.

 

Step1 :
I have written jQuery function, It will call get_geo_location.php function using Ajaxs.

Step2 :
In get_geo_location.php I used file_get_contents(‘http://freegeoip.net/json/’.$ip) function to get the data from a site which we requested. So I am passing the IP address and calling the freegeoip.net site, soon the freegeoip.net site will take our request and process the request and returns data in json format.

Step3 :
Freegeoip.net is site which will provide us the IP address details. You can use any other provider sites by just replacing the URL in file_get_contents(url) function.

Step4 :
So Freegeoip.net will return data in the desired format. I requested for json format so it will return in the JSON format. I just decode the JSON format and get the details like country code, country name, ect.

Step5 :
One more important point here is how we are going to integrate the Geo location with Google maps. It’s very simple, we will get the Longitude and Latitude from Freegeoip.net based on IP addresss which we requested. We will pass the Longitude and Latitude to Google map API. You can refer our previous post :  Google Map Integrating with Multiple Locations in HTML Page

 

Find the Bellow HTML Code :


<div class="row result-address" style="margin-bottom:10px;">
<div class="col-md-3" > </div>
<div class="col-md-5">
<table class="result-address-table">
<tbody>
<tr><td>City Name:</td><td class="city_name"></td></tr>
<tr><td>Region Name:</td><td class="region_name"></td></tr>
<tr><td>Country Name:</td><td class="country_name"></td></tr>
<tr><td>Latitude/Longitude: </td><td class="latlong"></td></tr>
</tbody>
</table>

</div>
<div class="col-md-4"> </div>

</div>

<div class="row" style="margin-bottom:30px;">

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map_canvas" style="width:600px;height:500px;margin: 0px auto;">Google Map</div>

</div>

 

Find the Bellow jQuery Code :


function initialize(custom_lat,custom_lng,title,address) {
var map_options = {
center: new google.maps.LatLng(custom_lat, custom_lng),
zoom: 4,
mapTypeId: "terrain" //google.maps.MapTypeId.ROADMAP
};

var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

var info_window = new google.maps.InfoWindow({
content: 'loading'
});

var t = [];
var x = [];
var y = [];
var h = [];

t.push(title);
x.push(custom_lat);
y.push(custom_lng);
h.push(address);

var i;
var alpha = ['A', 'B', 'C', 'D', 'E']
for (i = 0; i < t.length; i++) {
var m = new google.maps.Marker({
map: google_map,
animation: google.maps.Animation.DROP,
title: t[i],
position: new google.maps.LatLng(x[i], y[i]),
html: h[i],
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + alpha[i] + '|FF0000|000000'
});

info_window.setContent(m.html);
info_window.open(google_map, m);

google.maps.event.addListener(m, 'click', function () {
info_window.setContent(this.html);
info_window.open(google_map, this);
});

}
}

$(function () {

$("#ipaddress").focus();

var data = {"givenipaddress": ""};
$.ajax({
type: "POST",
dataType: "json",
url: "/demo22/get_geo_location.php", //Relative or absolute path to response.php file
data: data,
success: function(return_data) {
var custom_lat=return_data["latitude"];
var custom_lng=return_data["longitude"];

var title="Location: " + return_data["city"] + ", " + return_data["region_name"]+" , " + return_data["country_name"];

var country_flag ="<img src='"+ return_data['flag_path']+"' width='20' height='12' />";
var address="<p> "+ country_flag+" <strong>";

if(return_data["city"]!="" || return_data["city"]!=null )
address += return_data["city"] +", ";
if(return_data["region_name"]!="" || return_data["region_name"]!=null)
address += return_data["region_name"] +", ";
if(return_data["country_name"]!="" || return_data["country_name"]!=null)
address+=return_data["country_name"];

address+=" - <a href='https://www.facebook.com/splessons' target='_blank'> SPLessons </a> </strong></p>";

$(".city_name").html(return_data["city"]);
$(".region_name").html(return_data["region_name"]);
$(".country_name").html(country_flag+return_data["country_name"] + " - <strong> <a href='https://www.facebook.com/splessons' target='_blank'> SPLessons </a> </strong>" );
$(".latlong").html(return_data["latitude"]+" / "+return_data["longitude"]);

$(".result-address").slideDown(200);

initialize(custom_lat,custom_lng,title,address);

}
});

$("#get_location").click(function(){

if( $("#ipaddress").val())
{

var givenipaddress=$("#ipaddress").val();
//alert(gienipaddress.match(/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/));

if(givenipaddress.match(/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/))
{
var data = {"givenipaddress": givenipaddress};
$.ajax({
type: "POST",
dataType: "json",
url: "/demo22/get_geo_location.php", //Relative or absolute path to response.php file
data: data,
success: function(return_data) {

var custom_lat=return_data["latitude"];
var custom_lng=return_data["longitude"];
var title="Location: " + return_data["city"] + ", " + return_data["region_name"]+" , " + return_data["country_name"];

var country_flag ="<img src='"+ return_data['flag_path']+"' width='20' height='12' /> ";
var address="<p> "+ country_flag+" <strong>";

if(return_data["city"]!="")
address += return_data["city"] +", ";
if(return_data["region_name"]!="")
address += return_data["region_name"] +", ";
if(return_data["country_name"]!="")
address+=return_data["country_name"];

address+=" - <a href='https://www.facebook.com/splessons' target='_blank'> SPLessons </a> </strong></p>";

$(".city_name").html(return_data["city"]);
$(".region_name").html(return_data["region_name"]);
$(".country_name").html(country_flag+return_data["country_name"] + " - <strong> <a href='https://www.facebook.com/splessons' target='_blank'> SPLessons </a> </strong>");
$(".latlong").html(return_data["latitude"]+" / "+return_data["longitude"]);

$(".result-address").slideDown(200);

initialize(custom_lat,custom_lng,title,address);

}
});

}
else
{
alert("Please enter valid IP Address xxx.xxx.xxx.xxx");
$(this).val("");
$(this).focus();
}

}
else
{
alert("Please enter IP Address");
$(this).val("");
$(this).focus();
}

});

});
&nbsp;

 

 

Find the Bellow PHP Code :


<?php

if(isset($_POST))
{
if(isset($_POST['givenipaddress']) )
{
$ip =$_POST['givenipaddress'];

if(empty($ip))
$ip=$_SERVER["REMOTE_ADDR"];

$location = json_decode(file_get_contents('http://freegeoip.net/json/'.$ip));
$return_values = array();

$return_values["ip"]=$location->ip;
$return_values["country_code"]=$location->country_code;
$return_values["country_name"]=$location->country_name;
$return_values["region_code"]=$location->region_code;
$return_values["region_name"]=$location->region_name;

$return_values["city"]=$location->city;
$return_values["zipcode"]=$location->zipcode;

$return_values["latitude"]=$location->latitude;
$return_values["longitude"]=$location->longitude;
$return_values["metro_code"]=$location->metro_code;
$return_values["area_code"]=$location->area_code;

$generating_country_name_flag = strtolower($location->country_name);
$generating_country_name_flag = str_replace(" ","_",$generating_country_name_flag);

$return_values["flag_path"]="/demo22/images/country_tiny_flags/".$generating_country_name_flag.".png";

$return_values["json"] = json_encode($return_values);

echo(json_encode($return_values));
}
}
?>
&nbsp;