Hello,

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:

<html>

<head>

    <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">

        #container

        {

            left: -100000px;

            position: relative !important;

        }

        #map_canvas

        {

            margin: 0;

            padding: 0;

            height: 500px;

            width: 500px;

        }

    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></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" />

    

</head>

<body>

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

    <div id="container">

        <div id="map_canvas">

        </div>

    </div>

</body>


<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'),

            myOptions);

    }


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

    $("a#inline").fancybox();


    </script>

</html>

​​​​​

Cheers,