Geeks With Blogs
Hani Amr


I've been struggling around with an issue that seems to be very simple but it turned out to be a nightmare :D. All I wanted to do is to place a google map inside a jQuery modal popup. The problem that it wasn't displaying the map correctly, then after searching the problem, it turned out to be that google map could not be displayed in a hidden div, so the solution was to hide the div by adding a style to it as:

left: -10000px

And by using a popup like this one (Fancy box), you’ll get the map to display correctly J

Here's a Working example:



    <title>Map in FancyBox popup</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <meta charset="UTF-8">

    <style type="text/css">



            left: -100000px;

            position: relative !important;




            margin: 0;

            padding: 0;

            height: 500px;

            width: 500px;



    <script type="text/javascript" src=""></script>

    <script type="text/javascript" src=""></script>

    <script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>

    <script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>

    <link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" media="screen" />




    <a id="inline" href="#map_canvas">Open Map</a>

    <div id="container">

        <div id="map_canvas">




<script type="text/javascript">

    var map;

    function initialize() {

        var myOptions = {

            zoom: 8,

            center: new google.maps.LatLng(-34.397, 150.644),

            mapTypeId: google.maps.MapTypeId.ROADMAP


        map = new google.maps.Map(document.getElementById('map_canvas'),



    google.maps.event.addDomListener(window, 'load', initialize);







Posted on Wednesday, October 12, 2011 5:25 PM Javascript | Back to top

Copyright © H@Ni | Powered by: