Monday, April 2, 2012

Display user geo location data with Google Map API or Maxmind

First try to get geo data with Google JSApi. If it fails then try to connect with Maxmind database and retrieve data. This is a fallback option

[sourcecode]
<!DOCTYPE>
<html>
<head>
<title>Geo data</title>
<script src="http://maps.google.com/maps?file=api&v=2&amp;sensor=true" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script>
google.load("jquery", "1.4.4");
</script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
if(google.loader.ClientLocation) {
// Google has found you
visitor_lat = google.loader.ClientLocation.latitude;
visitor_lon = google.loader.ClientLocation.longitude;
visitor_city = google.loader.ClientLocation.address.city;
visitor_region = google.loader.ClientLocation.address.region;
visitor_country = google.loader.ClientLocation.address.country;
visitor_countrycode = google.loader.ClientLocation.address.country_code;

$("#user_method").html("Google Geo");
$("#user_latlong").html(visitor_lat + " / " + visitor_lon);
$("#user_town").html(visitor_city); $("#user_county").html(visitor_region);
$("#user_country").html(visitor_country + " (" + visitor_countrycode + ")");
}
else {
// Google couldnt find you, Maxmind could
visitor_lat = geoip_latitude();
visitor_lon = geoip_longitude();
visitor_city = geoip_city();
visitor_region_code = geoip_region();
visitor_region = geoip_region_name();
visitor_country = geoip_country_name();
visitor_countrycode = geoip_country_code();
visitor_postcode = geoip_postal_code();

$("#user_method").html("MaxMind");
$("#user_latlong").html(visitor_lat + " / " + visitor_lon);
$("#user_postcode").html(visitor_postcode);
$("#user_town").html(visitor_city); $("#user_county").html(visitor_region + " ("+visitor_region_code+")");
$("#user_country").html(visitor_country + " (" + visitor_countrycode + ")");
}

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var latlng = new GLatLng(visitor_lat, visitor_lon);
map.setCenter(latlng, 13);
map.addOverlay(new GMarker(latlng));

var center = latlng;
var radius = 0.65;

//convert kilometers to miles-diameter
var radius = radius*1.609344;
var latOffset = 0.01;
var lonOffset = 0.01;
var latConv = center.distanceFrom(new GLatLng(center.lat()+0.1, center.lng()))/100;
var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()+0.1))/100;
// nodes = number of points to create circle polygon
var nodes = 40;
//Loop
var points = [];
var step = parseInt(360/nodes)||10;
for(var i=0; i<=360; i+=step) {
var pint = new GLatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() + (radius/lngConv * Math.sin(i * Math.PI/ 180)));
// push pints into points array
points.push(pint);
}
var polygon = new GPolygon(points, "#f33f00", 1, 1, "#ff0000", 0.1);
map.addOverlay(polygon);
}
});
</script>
</body>
<div id="geoData">
<table style="width: 560px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Geocode Method:</td>
<td><span id="user_method"> </span></td>
</tr>
<tr>
<td>Your Latitude/Longitude:</td>
<td><span id="user_latlong"> </span></td>
</tr>
<tr>
<td>Town / City:</td>
<td><span id="user_town"> </span></td>

</tr>
<tr>
<td>Post Code:</td>
<td><span id="user_postcode"> </span></td>
</tr>
<tr>
<td>Approximate County:</td>
<td><span id="user_county"> </span></td>
</tr>
<tr>
<td>Country and Code:</td>
<td><span id="user_country"> </span></td>

</tr>
<tr>
<td colspan="2">
<div id="map_canvas" style=" margin:10px; border:1px solid #007; width: 540px; height: 360px;">Enable Javascript to view this map</div></td>
</tr>
</tbody>
</table>
</div>


</html>


[/sourcecode]

6 comments:

  1. Is it possible to add a text box to your script so that a visitor to this page (the one you've created in code above) can type in another IP or URL address, along with a "Find" button to make the new search possible?

    ReplyDelete
  2. This script can not be used to get user's geolocation by his IP address. I don't think that Google directly supports retrieving geolocation by IP address. But there many solutions for this scenario. You can use IP address database that maps your IP address to a location,city,region or a country. You can install this database locally or use an online IP database. Have a look at Maxmind Geoip
    There are also thirs party APIs like freegeoip.net that may help you.

    ReplyDelete
  3. The how does this website: www.ipligence.com/geolocation offer this "tool"?

    ReplyDelete
  4. I think they are using Google Map just to display location in a map. They should have their own IP address database. So they can map any IP address to a particular geo address. (city,state,country). They are displaying this textual address in Google Map. When they are unable to resolve an IP address (may be an invalid one), the map won't be displayed.

    ReplyDelete
  5. Is it possible (easy enough) to create a similar tool that other webmasters could offer from their website or is it a script that needs regular tweaking to keep it functioning?

    If yes, why hasn't there been a WP plugin created for such a tool? Just a thought.

    ReplyDelete
  6. Obviously you can create a tool or even an API that that works as an IP Geo Locator. I advise you to depend on already available IP address database like Maxmind. Otherwise you may have to maintain that huge database. I found some wordpress plugins built on top of Maxmind.

    ReplyDelete

How to enable CORS in Laravel 5

https://www.youtube.com/watch?v=PozYTvmgcVE 1. Add middleware php artisan make:middleware Cors return $next($request) ->header('Acces...