jquery - google maps api v3 in fancybox 2.0.6 -


hi have problem google map loading in hidden fancybox

enter image description here

my example: gidzior.net/fancymap written based on thread stackoverflow.com/questions/10890948/jquery-fancybox-with-google-maps

what can fix ??

this code:

<body style="padding: 20px;"> <!--[if lt ie 7]><p class=chromeframe>your browser <em>ancient!</em> <a href="http://browsehappy.com/">upgrade different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install google chrome frame</a> experience site.</p><![endif]--> <header> <a id="inline" href="#inline1" >show map</a> </header> <div role="main"> <div id="inline1" style="width:800px; height: 350px; display: none;"> <div id="map_canvas" style="width: 100%; height: 100%"></div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jquery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script src="js/plugins.js"></script> <script src="js/libs/jquery.fancybox.pack.js"></script> <script src="js/libs/jquery.mousewheel-3.0.6.pack.js"></script> <script src="js/script.js"></script> <script type="text/javascript"> var map=""; $(document).ready(function(){ $("a#inline").fancybox({ 'hideoncontentclick': false, // can handle map 'overlaycolor' : '#ccffee', 'overlayopacity' : 0.2, 'autodimensions': true, // selector #mapcontainer has css width , height 'oncomplete': function(){ google.maps.event.trigger(map, "resize"); }, 'oncleanup': function() { var mycontent = this.href; $(mycontent).unwrap(); } // fixes inline bug }); // map map = new google.maps.map( document.getelementbyid("map_canvas"), { zoom: 9, center: new google.maps.latlng(49.261226,-123.113928), maptypeid: google.maps.maptypeid.terrain } ); }); // ready </script> </body> 

there no oncomplete in fancybox v2 anymore, it's called afterload now.

but better use aftershow , fires little bit later.

http://fancyapps.com/fancybox/#docs


Comments

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -