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 3.142.198.109
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/. freegeoip.net provides a RESTful Web Service to access the data in csv, xml, json or jsonp callbacks that helped me built this pure JavaScript based API.
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.
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.
