Popup Google Maps for SharePoint

UPDATED - 10:00am PST, 10 Feb 2009

Thanks in large part to help from George Rhee, I was able to isolate a bug in the code that prevented it from working properly on certain sites. The problem came about if the Maps Link column was the last column on the list and manifest itself by demolishing the columns and formatting of the list. I found a way to prevent this and now it will work regardless of where the column is in relation to other columns in the list.

I've also updated the code so that the maps popup will show up within the body of the page you're viewing. No more having to scroll right and/or down to see your maps!

If you have a list of addresses that you want to create dynamic Google Maps for then this blog's for you! It's actually really easy ... I promise.
Here's how:

1. You'll need a list that has a column of addresses. For the purpose of this post, I have cleverly decided to use the column name of "Address" to represent my column of addresses. Yes I've had 5 cups of coffee today, why do you ask?
2. Create another column to hold the links that will open the Google Map. Again, I have cleverly titled this column "Google Maps Link". This column will be a calcuated column with the following code:

   =CONCATENATE("<div style='cursor:hand' onClick='showMap(this, event)'>",Address,"</div><tag>")

3. At the bottom of the page that will display these addresses, include a Content Editor Web Part with the following code:

   <div id='mapDiv' style='display:none;position:absolute;'>
   <div
   onClick='hideMap()'
   style='border-style:solid;
   border-width:1px;
   background:red;
   position:absolute;
   top:0px;
   left:554px;
   cursor:hand;'>
   close(x)
   </div>
   <iframe
   id='mapFrame'
   frameborder='0'
   src=''
   style='width:600px;
   height:600px;
   border-style:solid;
   border-width:1px'>
   </iframe>
   </div>
   
   <script type="text/javascript">
   //
   // declare variables
   var theTags = document.getElementsByTagName("TD");
   var i=0;
   var objFrame = document.getElementById("mapFrame");
   var objDiv = document.getElementById("mapDiv");
   var out = document.getElementById("output");
   //
   // write the calculated column into the page code
   while (i < theTags.length)
   { try
   { TagContent = theTags[i].textContent || theTags[i].innerText;
   if (TagContent.substr(TagContent.search("<tag>")) == "<tag>" && theTags[i].className == "ms-vb2")
   { theTags[i].innerHTML = TagContent; }
   }
   catch(err){}
   i=i+1;
   }
   //
   // function to make the map appear at the mouse
   function showMap(obj, event)
   {
   urlMaps = "http://maps.google.com/maps?q=";
   objFrame.src = urlMaps + (obj.innerText || obj.textContent);
   objDiv.style.display = "";
   (event.clientY + 600 > document.body.offsetHeight) ? objDiv.style.top = (document.body.offsetHeight - (event.clientY - 600)) : objDiv.style.top = event.clientY;
   (event.clientX + 600 > document.body.offsetWidth) ? objDiv.style.left = (event.clientX - 600) : objDiv.style.left = event.clientX;
   }
   //
   // function to hide the map
   function hideMap()
   { objFrame.src = ""; objDiv.style.display = "none"; }
   </script>

Enjoy!