Show your visitors (based on IP) in Google Maps

During the weekend I extend DG Tournament with a Google Map of the participants of the Euro 2008 tournament. Although most people put in their profile the country they live in, it's nice to see where they logged in from.


Click on Map in DG Tournament to see it in action.

In Google Maps you can specify a place based on a street or based on coordinates. There's no standard way of showing somebody based on his IP. So I searched a long time for such a service. Most of the services are payable (and expensive), but I found one site which provides you with this service for free: http://api.hostip.info. If you just want to see yourself, you can also use this service: http://freeipservices.com.

Warning

Catching the IP of a visitor of your site is not easy and not fully proof. You've different techniques depending in which environment you're and what your server can provide.
It would have been nice if you could do it from javascript, but I don't think it's possible.

Implementation

First thing to do is to include the Google Maps code in your html page. Google has a very good API and documentation how to do that. Just click on an example you like, view page source and copy the javascript code to your own page. An onload event in the body let the code run when you open the page. This step will give you already the map.

Second thing to do is to add an icon on the map with the location of the IP. With the website I mentioned above you can transform your IP address into a longitude and latitude (or also called coordinates). I always try to use webservices, some kind of rss or just something that returns me xml which makes it easy for me to integrate in my Oracle and APEX environment. In the World Cup 2006 application I used webservices, in the APEX Blog Aggregator I used rss. The query to get the data for my blog for ex. looks like this:

SELECT EXTRACTVALUE (VALUE (t), 'entry/title/text()', 'xmlns="http://www.w3.org/2005/Atom"' ) AS title
FROM TABLE (XMLSEQUENCE (EXTRACT (HTTPURITYPE ('http://dgielis.blogspot.com/feeds/posts/full?max-results=10' ).getxml (), '/feed/entry', 'xmlns="http://www.w3.org/2005/Atom"' ) ) ) t

I now wanted to do the same with the HostIp site, but that site returned xml with namespaces! It was a real nightmare to track down how to get the data out of that. As it was already a long time over midnight and having searched forever and having asked some friends I decided to do it the easy way: read the whole xml into a clob and do some replace and regexp_substr combination to get the data I needed. The solution was not fast and I didn't like I didn't know how to do the xml interpretation with namespaces as I was sure it was possible as I had seen it somewhere before. On Sunday I had a conversation with Mr XML, Marco Gralike and asked him the question. Of course after no time he gave me the correct SELECT to understand the namespace. He already blogged about it, so I'm not going to do that anymore.

But on Monday when I came in the office and talked with John Scott about it, he said: "Oh you didn't know that? I blogged about it before with my Google Calendar integration!"
Then you think: Doh! Why didn't I found it?
The answer: Because he used images and not text, so google didn't know it. When I looked at his post, I saw I even commented on it! So it must have been there I saw it ;-)

And in the post was exactly what happened with me: "If you ever find yourself having problems extracting data from your XML document, then always double check that the namespace isn’t the cause of your problems, forgetting to use the correct namespace can easily chew up hours of head-scratching and banging your head on the table."

So basically if you've your longitude and latitude you can give it to the javascript of the Google Maps code and it will create an icon on the map.

Integrating Google Maps, your IP and location is fairly easy if you know how it all works ;-)