Home/ Questions/Q 6839741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:45:21+00:00

http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/ I am following this tutorial on how to display google map over a

  • 0

http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/ I am following this tutorial on how to display google map over a text. Yes it appears but in a wrong place. See, the map is displaying on the bottom of the page. When I hover the map image the div itself has no attributes compared to the working ones.

Working code:

<div style="position: absolute; left: 678px; top: 170px; z-index: 999; display: none; padding: 1px; margin-left: 5px; background-color: rgb(51, 51, 51); width: 302px; box-shadow: 0pt 1px 10px rgba(0, 0, 0, 0.5);">
<a target="new" href="http://maps.google.com/maps?q=Brookhaven, PA&z=11">
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=Brookhaven, PA&zoom=12&size=300x300&sensor=false&format=png&markers=color:blue|Brookhaven, PA">
</a>
</div>

What’s in my browser: 

<div style="display: none;">
<a target="new" href="http://maps.google.com/maps?q=4417 Edgmont Avenue, 19015&z=11">
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=4417 Edgmont Avenue, 19015&zoom=16&size=300x300&sensor=false&format=png&markers=color:blue|4417 Edgmont Avenue, 19015">
</a>
</div>

I’m lost on the div part.
Please help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what works for me:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery Test Script</title>
</head>
<body>
<span class="mapThis" place="600 Forbes Ave, Pittsburgh, PA 15282" zoom="16">Duquesne University</span> is located in the great town of <span class="mapThis" place="Pittsburgh, PA" zoom="12">Pittsburgh</span> in the great state of <span class="mapThis" place="Pennsylvania" zoom="6">Pennsylvania</span>.
<script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script>
<script src="scripts/test_script.js"></script>
</body>
</html>

    Here’s the jQuery to make it happen:

    // 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 ? document.documentElement.scrollTop : document.body.scrollTop);
 }
    • 0