IP Address geocoding API for Google Maps
Asynchronously Geocode IP Addresses on Google Maps by only using JavaScript & jQuery.
Please enter a valid IP Address to Geocode and mark it on the map. Your current IP Address is 38.107.179.223
Overview:
IP Address geocoding is getting more and more popular with people who are building their own analytics tools.
There are a lot of free geocoding web services available which can return the geocoded data in text, XML or JSON format.
For people who have a server scripting access can easily get this JSON data and print it on the html page. But I wanted
to build only a JavaScript based solution which could geocode the IP Addresses asynchronously without using any server side scripting. For geocoding the IP Address,
I used a free webservice provided by http://freegeoip.net/.
Apart from that, I had to use another free service (http://jsonpify.com)
for converting the JSON data returned from http://freegeoip.net/json/
to JSONP because JSONP
is the only cross-domain communication mechanism supported by modern browsers.
Previously I was using the free JSONP wrapper service provided by http://jsonpify.com, but recently the website went down for unknown reason.
So, I created my own PHP JSONP Wrapper to convert JSON to JSONP.
To use this on your PHP website, simply use the code provided in download section.
I strongly recommend you NOT to use the wrapper on my lab page as I can't guarantee 100% reliability and availability.
You can search online for writing the JSON-to-JSONP wrapper in different programming languages.
This API library is very easy to use and setup on your website. You will have to sign up for Google Map API if you haven't already done for your domain. For more examples and details on setting up the API, please read through rest of the document.
Requirements:
This API uses jQuery so you need to include that in the HEAD section:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>Add Google Maps API in the HEAD section:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>Include IP Mapper API in the HEAD section:
<script type="text/javascript" src="ipmapper.js"></script>Inside your page body, you can put the Map div anywhere you want to:
<div id="map"></div>
Examples & Usage:
Initialize Google Map in the page load event by passing the Map div id. You can then call the IPMapper.addIPMarker function to add IP markers on the Map. You can also add multiple IP Addresses by using arrays. Example: Display visitors location by IP Address in PHP. After initializing the Map, you can call the IPMapper.addIPMarker function from any event to geocode and add the marker asynchronously.Configuration Options
This library does not require any configuration out of the box. The library functions are fairly easy to understand, so you can make any configuration to Google Maps or other methods without any difficulty.To modify Google Maps configuration:
Google Maps API Reference: http://code.google.com/apis/maps/documentation/javascript/reference.htmlTo modify the MapTypeId for Google Maps, you can simply change the global variable. For other changes, you can make changes to the initializeMap method.
To use any other IP geocoding web service:
For using any other IP geocoding web service, you will have to change the baseUrl to point to the new service. If the new service has a very different naming and structure, then you might have to change the $.getJSON success function in addIPMarker method.Demo Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IP Address geocoding on Google Maps</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="ipmapper.js"></script>
<script type="text/javascript">
$(function(){
try{
IPMapper.initializeMap("map");
IPMapper.addIPMarker("111.111.111.111");
} catch(e){
//handle error
}
});
</script>
</head>
<body>
<input id="ip" name="ip" type="text" />
<button onclick="IPMapper.addIPMarker($('#ip').val());">Geocode</button>
<div id="map" style="height: 500px;"></div>
</body>
</html>
Download
View the formatted version.Download the JavaScript file for development.
Download the minified version.
Download the PHP JSONP Wrapper code.
