gmaps hover

by Craig Martin

HTML

<span class="mapThis" place="90069" zoom="10">90069</span>.

CSS

a.tip {
    position: relative;
}

a.tip span {
    display: none;
    position: absolute;
    top: -5px;
    left: 60px;
    width: 125px;
    padding: 5px;
    z-index: 100;
    background: #000;
    color: #fff;
    -moz-border-radius: 5px; /* this works only in camino/firefox */
    -webkit-border-radius: 5px; /* this is just for Safari */
}
a.tip span:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; 
    border-right:8px solid black;
    left:-8px;
    
    top:7px;
}

a:hover.tip {
    font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
    display: block;
}

JavaScript

// JavaScript Document
$(document).ready(function () {
var cursorX;
var cursorY;
if (window.Event) {
  document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getCursorXY;
$(".mapThis").each(function() {
  var dPlace = $(this).attr("place");
  var dZoom = $(this).attr("zoom");
  var dText = $(this).html();
  $(this).html('<a onmouseover="mapThis.show(this);" style="text-decoration:none; border-bottom:1px dotted #999" href="http://maps.google.com/maps?q=' + dPlace + '&z=' + dZoom + '">' + dText + '</a>');
 });
});
var mapThis=function(){
var tt;
var errorBox;
return{
  show:function(v){
   if (tt == null) {
   var pNode = v.parentNode;
   pPlace = $(pNode).attr("place");
   pZoom = parseInt($(pNode).attr("zoom"));
   pText = $(v).html();
   tt = document.createElement('div');
   $(tt).html('<a href="http://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="http://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size=300x300&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>');
   tt.addEventListener('mouseover', function() { mapHover = 1; }, true);
   tt.addEventListener('mouseout', function() { mapHover = 0; }, true);
   tt.addEventListener('mouseout', mapThis.hide, true);
   document.body.appendChild(tt);    
}
fromleft = cursorX;
fromtop = cursorY;
fromleft = fromleft - 25;
fromtop = fromtop - 25;
tt.style.cssText = "position:absolute; left:" + fromleft + "px; top:" + fromtop + "px; z-index:999; display:block; padding:1px; margin-left:5px; background-color:#333; width:302px; -moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5);";   
tt.style.display = 'block';
},
hide:function(){
tt.style.display = 'none';
tt = null;
}
 };
}();
function getCursorXY(e) {
cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop...