October 8, 201015 yr Hi, This is what i want to do > http://jquery.diaz-cornen.com/fancybox/index_map.html I can get it working where when you click the link the fancybox popup opens, but no map appears in the fancybox. Can anyone else get this working or is it just me? Been at it all day, even tried some simple text in there instead of the map and that wont show! Im thinking its to do with the text file iframe? But its exactly the same as the demo yet that works and mine doesnt? Any help would be great.
October 8, 201015 yr Author ill upload my files when i get home, i am trying to replicate this locally on my work machine > http://jquery.diaz-cornen.com/fancybox/index_map.html If you go on that link and click on > click here to see the map graciously centered But the map wont load INSIDE of the fancybox on my machine. On the demo it works fine.
October 8, 201015 yr Author Here is my problem http://www.pbwebdesign-warrington.co.uk/test_area/map_test/index_map.html The map wont load inside the fancybox. I know it says i need a new API key, but i have stripped this code out and used a simple <p>test</p> in there and it wont even show that! Any ideas?
October 8, 201015 yr I also use a embedded map on one of my sites. Not sure how I got around it. I use rssmapper.com and it was less of a headache. Here is my map, i purposely have hidden part of it to allow room for ads on the right side..... http://maps.hbncdesign.com/maps.html Find me on Twitter.... http://twitter.com/HBnC_Design Facebook Group..... http://bit.ly/8x88q4 Facebook Fan page....http://bit.ly/ahrdVh Linked In.... http://www.linkedin.com/in/hbncdesign Thanks, look forward to future networking
October 8, 201015 yr Here is my problem http://www.pbwebdesign-warrington.co.uk/test_area/map_test/index_map.html The map wont load inside the fancybox. I know it says i need a new API key, but i have stripped this code out and used a simple <p>test</p> in there and it wont even show that! Any ideas? Just tested it using your sources as a base but linking directly to the js/css on their site and was able to load a .txt file into the box okay. Have you checked your paths and js files?
October 8, 201015 yr okay, try this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Jose Francisco Diaz / diaz-cornen.com" /> <meta name="description" content="fancybox and google map" /> <title>fancybox and google map</title> <link rel="stylesheet" type="text/css" href="http://jquery.diaz-cornen.com/fancybox/fancybox/jquery.fancybox.css" media="screen"> <script type="text/javascript" src="http://jquery.diaz-cornen.com/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://jquery.diaz-cornen.com/fancybox/fancybox/jquery.fancybox-1.2.0.pack.js"></script> <style type="text/css"> * {margin: 0; padding: 0;} body {font-family: sans-serif; font-size: 14px;} #wrapper {width: 600px; padding: 50px; margin: 0 auto 0 auto;} div, p, ul, h3 {padding-bottom: 10px;} </style> <script type="text/javascript"> $(document).ready(function() { $("a#mapcontent").fancybox({ 'frameWidth': 600, 'frameHeight': 360, 'hideOnContentClick': false, 'callbackOnClose': function() { $("#fancy_content").empty(); } }); }); </script> </head> <body> <div id="wrapper"> <p>click <a id="mapcontent" href="mapframe.html"><strong>here</strong></a> to see the map graciously centered</p> </div> </body></html> and them the mapframe.html is <div id="map" style="width: 600px; height: 400px;"> blah blah <script src="http://maps.google.com/maps? file=api&v=2.78&key=ABQIAAAAGRi8sCAXtdAivV0kJiIINxT9JkFp_4umVz-T1EpGOZXo_2DYYxQUysq- XvXvQGBncgVwTJZl_d_wqg" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; var pointabs = new GLatLng(47.286724,12.824573); var text = '<b>Pension Maria</b><br />Raiffeisenstrasse 3<br />Bruck an der Glocknerstrasse'; var marker = new GMarker(pointabs); function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl()); map.enableContinuousZoom(); map.enableScrollWheelZoom(); function wheelevent(e) { if (!e) e = window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } GEvent.addDomListener(map.getContainer(), "DOMMouseScroll", wheelevent); map.getContainer().onmousewheel = wheelevent; map.setCenter(pointabs, 13); map.addOverlay(marker); marker.openInfoWindowHtml(text); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(text); }); } } load(); //]]> </script> </div> that gives me a box saying 'blah blah'. The map doesn't show though.
October 8, 201015 yr Author I think i have got it working, here is the code, would you be able to have a quick look for me please? Ive only managed to get it working locally though, not when live (i think this is due to the api key when putting it live) http://www.pbwebdesign-warrington.co.uk/test_area/map_test/map_test.zip Thanks for the help
October 9, 201015 yr tried it locally on my PC and works fine in IE8, Firefox and Opera Chrome though...and maybe sensitive to any Google stuff in there?? reports XMLHttpRequest cannot load mapframe.txt. Origin null is not allowed by Access-Control-Allow-Origin.
October 9, 201015 yr Author Is there a way to get it to work without the txt file? Ideally would like it to work on all browsers. Thanks for looking mate
October 16, 201015 yr Just examined it using your sources as a base but linking directly to the java script or css on their site as well as was capable to load a .txt file into the box okay.
Create an account or sign in to comment