RSS

Display user geo location data with Google Map API or Maxmind

02 Apr

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

<!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>


Advertisements
 
6 Comments

Posted by on April 2, 2012 in Geo Programming, JavaScript

 

Tags: , , , ,

6 responses to “Display user geo location data with Google Map API or Maxmind

  1. Trish

    February 2, 2013 at 10:53 am

    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?

     
    • Rajitha

      February 2, 2013 at 2:15 pm

      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.

       
  2. Rajitha

    February 3, 2013 at 2:24 pm

    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.

     
    • TrishTrish

      February 3, 2013 at 11:14 pm

      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.

       
      • Rajitha

        February 3, 2013 at 11:31 pm

        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.

         

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: