Google map problem in jQuery popup

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>

</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,

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