Tuesday, June 14, 2011

IP Address Geocoding API for Google Maps

IP Address Geocoding is getting more and more popular with people who are building their own analytics tools or want to track their users. There are a lot of free geocoding web services available which can return the geocoded data in text, XML or JSON format, the most popular ones being http://freegeoip.net, http://ipinfodb.com, http://www.hostip.info, http://www.maxmind.com and many others. Geocoded data from these website can be easily accesses by using any server side scripts, but I wanted to build a JavaScript based solution which only works using asynchronous AJAX calls. For this API I used a free web service provided by http://freegeoip.net/ which returns data in XML(http://freegeoip.net/xml/) or JSON(http://freegeoip.net/json/) format and recently added JSONP callbacks so we can implement a pure JavaScript based API.

This API uses Google Map Api to display map and geotag the IP Address. You will have to sign up for Google Map API if you haven't already done for your domain.

For demo and more information on how to use this API, please visit my lab page at:
http://lab.abhinayrathore.com/ipmapper/

Please drop a comment below if you like this API or have any modifications or improvements.

39 comments:

  1. Hi, i try your demo Code in a php file but it give me only a black space..
    Can you give me any suggestion or help??
    thanks, Luca

    ReplyDelete
    Replies
    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

      Delete
  2. Luca, try this demo page: http://lab.abhinayrathore.com/ipmapper/demo.php
    This works perfectly on my side. If this doesn't work, try some other browser.

    ReplyDelete
  3. this is 2 days that your code not working. even on your demo website. Please check it.

    ReplyDelete
  4. Where to put the google API key?

    ReplyDelete
  5. Great effort.I like to say big thanks .It solved my doubt.Thanks for creating a wonderful site.

    ReplyDelete
  6. hello

    How do I change the default zoom. shows a very close location

    ReplyDelete
  7. Anonymous, you can change the zoom on line #18.

    ReplyDelete
    Replies
    1. where line # 18 or which file

      thanks

      Delete
    2. ok found ipmapper.js. but not active changes

      Delete
    3. hey pls help me change line #18 but not active changes

      a={zoom:15,center:c,mapTypeId:IPMapper.mapTypeId}

      Delete
    4. not working a={zoom:15,center:c,mapTypeId:IPMapper.mapTypeId}

      Delete
    5. Sorry, my bad... in this file http://lab.abhinayrathore.com/ipmapper/ipmapper.htm after line # 76 in placeIPMarker function, add this line: IPMapper.map.setZoom(15);

      Delete
    6. thanks now working.. map is more readable.

      also it slows down during peak hours .. cdn is better to use. example cloudflare

      Delete
    7. Hello,

      I couldn't work it.
      I changed as following:

      placeIPMarker: function(marker, latlng, contentString){ //place Marker on Map
      marker.setPosition(latlng);
      google.maps.event.addListener(marker, 'click', function() {
      IPMapper.getIPInfoWindowEvent(marker, contentString);
      });
      IPMapper.latlngbound.extend(latlng);
      IPMapper.map.setCenter(IPMapper.latlngbound.getCenter());
      IPMapper.map.fitBounds(IPMapper.latlngbound);
      IPMapper.map.setZoom(15);
      },

      Thanks.

      Delete
  8. You don't need a JSONP wrapper, they support it: http://freegeoip.net/json/209.85.145.147?callback=show

    Even better, you can just do a XMLHttpRequest because they send "Access-Control-Allow-Origin: *"

    ReplyDelete
    Replies
    1. Thanks for the info :) They didn't support JSONP when I initially built this API. I've updated the API code to get rid of the wrapper :)

      Delete
  9. I want to change the marker but not able pls help me out. Thanks

    ReplyDelete
    Replies
    1. Ali, inside the placeIPMarker method, set the marker icon in first line with marker.setIcon(...);
      For more help check the API reference: https://developers.google.com/maps/documentation/javascript/reference#Marker

      Delete
  10. I am trying to map 4,000 ip addresses and it just doesn't seem to be including all 4,000 in the map display. Is there a max number to display set in the array? I'm not a programmer but was able to get this to work thanks to your instruction. I also scrolled through the 4,000 ip's to see if there was a formatting issue in the bunch but didn't see on. Any thoughts?

    thanks,

    Jeff

    ReplyDelete
  11. Hi!

    There are too many marker in the same place so I would like to make groups for the markers. I found this: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/examples/simple_example.html and it would be perfect for me but how to use with IP addresses? Please help me. Thanks!

    ReplyDelete
    Replies
    1. hi you get any where on this as i have the same problem

      Delete
    2. hi. have you solved this problem?

      Delete
  12. Hi
    please see my question, I hope somebody will help me: http://stackoverflow.com/questions/16057252/make-groups-for-markers-in-google-map-apiv3?noredirect=1#comment22914818_16057252

    ReplyDelete
  13. Hello, my test page begin to show a strange character !! whats the problem ?? please help
    test : http://www.eaglestats.com/map.php

    ReplyDelete
  14. Thank you.
    BTW i was not able to set the zoom, it looks like it has to do with the number of the ip's to show. When i put more than one it zoom correctly(?).

    ReplyDelete
  15. huge looading time freegeoip.net why? http://lab.abhinayrathore.com/ipmapper/ not working

    ReplyDelete
  16. Works like a charm, thanks alot! I've added an index and Markers array to the class, with which it is able to zoom in (and out) on IP adresses from a formatted HTML table, using IPMapper.zoomIPMarker().

    If you want the modifications, let me know.

    ReplyDelete
  17. I have a problem with the zoom. I can change the number but always is showed like 1. I have tested all people suggestions but still the same issue.

    ReplyDelete
  18. Ecommerce websites attract thousands of buyers by offering great deals and better prices.Lots of ecommerce websites are being developed in order to fulfill market demands
    eCommerce Development Services Company in Bangalore | Magento developers in Bangalore

    ReplyDelete
  19. Hi,
    I have only just come across this script and it looks ideal for what I need to do. Unfortunately Google now require an API key to use the map services, where should I put the API key? I have tried just adding src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=map"
    async defer>
    To the html page, but this doesn't seem to work.
    Thanks

    Michael

    ReplyDelete
  20. Thanks for sharing this info
    http://www.ecommercedevelopersbangalore.com/

    ReplyDelete
  21. Why this error-"This page didn't load Google Maps correctly. See the JavaScript console for technical details." coming? Where to use API key

    ReplyDelete
  22. mytectra placement Portal is a Web based portal brings Potentials Employers and myTectra Candidates on a common platform for placement assistance.

    ReplyDelete
  23. Guaranteed #1 Search Engine Ranking Supreme Free Viral Traffic Join Now Get Millions Of Hits Free To Your Site/Blog!

    PornKings Adult Shopping Backlinks-Shopping Mega Store Legendary Stars As Stormy Daniels,Shawna Edwards,Jenna Jamison-New Adult Stars Movies,Adult Toys,Enhancers,Merchandise-More !

    Hits Express Rotator System Do You Need Visitors to Your Website or Affiliate Program? If your looking to gain more visitors to your website Hits Express is your answer. With our program your site is being shown to people all over the world 24/7 365 days a year!

    PAYDIR Free For All Forum Portal Search Engine Crawled Network PR10 Ranking Information Forum XXX!

    FreeLinkExchanges Be Seen In 12 Nations 312 Sites Over 30 Millions Viewers Monthly Buy Featured Link Now With 150 Search Engines Crawling The Network!

    How do I get guaranteed traffic? When someone signs up from your site, they must first click on your classified ad which will open a new window leading to your main website. They will have to wait a few seconds for the code to appear on a separate frame at the top of the screen reach millions free now!

    Blast Your Ad to Over 23,000 Opt-in Prospects at ShowMyLinks Submit Your Solo Email Ad to All Showmylinks Members GET YOUR TEXT LINK ADs LISTED 100% FREE FOR LIFE PLUS EARN MONEY TO YOUR PAYPAL!!

    Adult Store Empires Backlinks Resources Search Engine XXX!

    GET YOUR OWN MONEY-MAKING AD BOARD -- Integrating Text ad, Banner Ad and Email Ad into one Portal Make Money Fast With Your Paypal Reach Million Dollars In A Year Fast !

    Full Length Homemade Videos Watch real people's private home sex videos. Forget about those shitty 1-2 minute clips, these are all high quality full length videos! 40+ Bonus Sites You will also get full access to the entire reelpass network of sites which features over 40+ awesome movie sites, 1000's of movies and pictures to download! Download, Burn & Share Not only do you get to watch all our movies, you can also download every single one and save it forever, burn them to dvd or share with friends!!

    ReplyDelete

Thanks a lot for your valuable comments :)