All geek questions in one place

Display google map by link or text

http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/ I follow this guide on how to display a Google map in text. Yes, this seems like the wrong place. See, A map is displayed at the bottom of the page. When I find the map image, the div itself has no attributes compared to working ones.

Work 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 lost part of the div. Please, help!

+6
source share
2 answers

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 jQuery to make this 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); }
+5
source

I know this post is outdated, but I thought it might be useful if someone stumbles upon this and is looking for a more recent example. Although the code in the answer works well, it is not written in jQuery friendly format. I also found that the way to configure event listeners made it a little harder to use. Finally, a fixed card size just doesn't work in the modern world. Hope this helps someone!

Add #mapHolder anywhere on your page and customize it to your liking:

 <div id='mapHolder' style='whatever you want'></div>

Place links anywhere on your page so that you display a map when you shade:

  <a class="mapthis" place="properly formatted address" zoom="12">MAP</a>

JQuery

 $(document).on("mouseenter", ".mapthis", function(e) { var desiredMapWidthPercent = .8; var mapWidth = Math.round($(window).width() * desiredMapWidthPercent); var aspectRatio = mapWidth / $(window).height(); var mapHeight = Math.round($(window).height() * aspectRatio); var boxWidth = mapWidth; var boxHeight = mapHeight; var scale = 1; var pZoom = parseInt($(this).attr("zoom")); var pPlace = $(this).attr("place"); if((mapHeight > 640) || (mapWidth > 640)){ mapHeight = Math.round(mapHeight / 3.5); mapWidth = Math.round(mapWidth / 3.5); scale = 2; if(((mapHeight) > 1280) || ((mapWidth) > 1280)){ mapHeight = 640; mapWidth = 640; boxWidth = 1280; boxHeight = 1280; }else{ boxWidth = mapWidth * 2; boxHeight = mapHeight * 2; } } var fromleft = Math.max(0, ((($(window).width() - boxWidth) / 2) + $(window).scrollLeft()))+'px'; var fromtop = Math.max(0, ((($(window).height() - boxHeight) / 2) + $(window).scrollTop()))+'px'; var pText = $(this).html(); $('#mapHolder').html('<a href="https://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="https://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size='+mapWidth+'x'+mapHeight+'&scale='+scale+'&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>'); $('#mapHolder').css({position:'absolute',top:fromtop,left:fromleft, width:boxWidth, z-index:'999'}); $('#mapHolder').show(); }); $(document).on("mouseleave", ".mapthis", function(e) { if($(e.relatedTarget).closest('#mapHolder').length){ $("#mapHolder").on("mouseleave", function(e) { $('#mapHolder').hide(); }); return; } $('#mapHolder').hide(); });
0
source

Source: https://habr.com/ru/post/901974/

More articles:


All Articles