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.

Posted by at

40 comments:

  1. AnonymousJune 18, 2011 at 1:35 AM

    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
  2. Abhinay RathoreJune 18, 2011 at 9:23 AM

    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. Goca GٌürdJune 22, 2011 at 7:34 AM

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

    ReplyDelete
    Replies
    1. Darren DemersSeptember 3, 2020 at 4:15 AM

      Great effort.I like to say big thanks .It solved my doubt.Thanks for creating a wonderful site. Beaded & Coin Ear Ring , 1920s head pieces , kids jewelry box , winter scarf

      Delete
  4. peraSeptember 1, 2011 at 5:12 AM

    Where to put the google API key?

    ReplyDelete
  5. Ecommerce developerJanuary 2, 2012 at 5:28 AM

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

    ReplyDelete
  6. AnonymousJanuary 20, 2012 at 5:14 PM

    hello

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

    ReplyDelete
  7. Abhinay RathoreJanuary 20, 2012 at 6:56 PM

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

    ReplyDelete
    Replies
    1. AnonymousJanuary 21, 2012 at 5:31 PM

      where line # 18 or which file

      thanks

      Delete
    2. AnonymousJanuary 21, 2012 at 5:48 PM

      ok found ipmapper.js. but not active changes

      Delete
    3. AnonymousJanuary 23, 2012 at 10:07 AM

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

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

      Delete
    4. Abhinay RathoreJanuary 23, 2012 at 11:41 AM

      Changing zoom:15 should work!

      Delete
    5. AnonymousJanuary 23, 2012 at 2:25 PM

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

      Delete
    6. Abhinay RathoreJanuary 23, 2012 at 7:06 PM

      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
    7. AnonymousJanuary 24, 2012 at 6:01 AM

      thanks now working.. map is more readable.

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

      Delete
    8. AnonymousFebruary 28, 2013 at 7:57 AM

      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. AnonymousJune 12, 2012 at 8:09 PM

    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. Abhinay RathoreJune 13, 2012 at 1:34 PM

      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. UnknownJuly 5, 2012 at 2:53 AM

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

    ReplyDelete
    Replies
    1. Abhinay RathoreJuly 7, 2012 at 9:35 AM

      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. AnonymousMarch 21, 2013 at 8:55 PM

    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. AnonymousApril 16, 2013 at 7:34 AM

    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. padster2012May 2, 2013 at 6:58 AM

      hi you get any where on this as i have the same problem

      Delete
    2. AnonymousMay 24, 2013 at 11:45 AM

      hi. have you solved this problem?

      Delete
  12. AnonymousApril 17, 2013 at 5:38 AM

    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. MhrApril 18, 2013 at 11:42 AM

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

    ReplyDelete
  14. AnonymousNovember 24, 2013 at 1:29 PM

    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. AnonymousJanuary 2, 2014 at 8:26 AM

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

    ReplyDelete
  16. AnonymousMarch 23, 2014 at 11:08 AM

    Thanks!

    ReplyDelete
  17. AnonymousMarch 18, 2015 at 4:06 PM

    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
  18. Carlos Fabuel @seovalenciaAugust 22, 2016 at 5:26 AM

    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
  19. ScottSageMarch 20, 2017 at 2:05 PM

    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. UnknownApril 6, 2018 at 12:14 AM

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

    ReplyDelete
  21. UnknownMay 10, 2018 at 9:34 AM

    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. UnknownSeptember 19, 2018 at 1:21 AM

    Python is a general-purpose interpreted, interactive, object-oriented and high-level programming language. Currently Python is the most popular Language in IT.
    python training in bangalore
    aws training in bangalore
    artificial intelligence training in bangalore
    data science training in bangalore
    machine learning training in bangalore
    hadoop training in bangalore
    devops training in bangalore

    ReplyDelete
  23. Zoki303November 17, 2020 at 8:39 AM

    This comment has been removed by the author.

    ReplyDelete
  24. Zoki303November 17, 2020 at 8:45 AM

    Hello, I am looking for a good Geolocation API can some one of you suggest some that is very accurate?
    Is there difference in any of them?
    I heard good things about https://www.abstractapi.com can someone share their experience with them if someone has any?
    Thank you!

    ReplyDelete
  25. Yash MaliFebruary 10, 2021 at 5:52 AM

    magento 2 mobile app development
    magento 2 mobile app builder

    ReplyDelete
  26. Yug TechnologyApril 5, 2021 at 9:56 PM

    Best Software Development Company And Services In India
    Web Design And Development India

    ReplyDelete
  27. UnknownJanuary 29, 2022 at 1:44 AM

    I think this is a standout amongst the most critical data for me. What"s more, i"m happy perusing your article. Be that as it may, ought to comment on some broad things High PBN Service

    ReplyDelete

Thanks a lot for your valuable comments :)

Subscribe to: Post Comments (Atom)