Google Maps in jQuery UI Dialog
Google Maps in jQuery UI Dialog
Just a quick fix type of post that hopefully someone finds in their googling. If you are attempting to use a google map (either v2 or v3) in your page, and want it inside a jQuery UI dialog box, you will likely run into a strange behavior where half the map is grey. You can pan around, zoom and such, but the map itself just acts weird. Only chunks of it show up. The reason for this, as close as I can find is that the map figured out how large it can be by finding the size of it’s parent container. So when you make a dialog box that isn’t autoopen it has no size. So the map says ‘ok, I guess I don’t really have a size’ and it proceeds to freak out. The fix is super simple, but it took me way to long to find and properly implement.
The source：
<!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=utf-8" />
<title>Google Map in jQuery dialog box</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-darkness/jquery-ui.css" />
<style>
.gBubble
{
color:black;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
</style>
<script>
var map;
var coords = new Object();
var markersArray = [];
coords.lat = 44.856051;
coords.lng = -93.242539;
$(document).ready(function()
{
$( "#map_container" ).dialog({
autoOpen:false,
width: 555,
height: 400,
resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize') },
open: function(event, ui) {google.maps.event.trigger(map, 'resize'); }
});
$( "#showMap" ).click(function() {
$( "#map_container" ).dialog( "open" );
map.setCenter(new google.maps.LatLng(coords.lat, coords.lng), 10);
return false;
});
$( "input:submit,input:button, a, button", "#controls" ).button();
initialize();
plotPoint(coords.lat,coords.lng,'Mall of America','<span class="gBubble"><b>Mall of America</b><br>60 East Brodway<br>Bloomington, MN 55425</span>');
});
function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon)
{
var myLatlng = new google.maps.LatLng(srcLat, srcLon);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:title,
icon: markerIcon
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: popUpContent
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function initialize()
{
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body>
<div id="map_container" title="Location Map">
<div id="map_canvas" style="width:100%;height:100%;"></div>
</div>
<div id="controls">
<input type="button" name="showMap" value="Show Map" id="showMap" />
</div>
</body>
</html>
The secret is the event handlers for the open and resize actions on the dialog.
resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize') },
open: function(event, ui) {google.maps.event.trigger(map, 'resize'); }
Those guys right there make the magic happen. Just make sure to include the resize functions in the event handlers when you register the dialog and you are all good. They just say when the dialog is opened or resize, have the google map recheck the size of it’s parent and scale accordingly. That resolves the issue in a snap. The rest of the code just makes a nice little sample app you can play with. Anyway, I really hope this helps someone cause I spent an afternoon beating my head against the wall on this one, and even migrated my whole app from google maps v2 to v3 hoping that would fix it, when it didn’t. >.<