In this article I will explain how to display Google Maps inside jQuery UI Dialog Modal Popup window.
 
Displaying Google Maps inside jQuery Dialog Modal Popup Window
The HTML Markup consists of an HTML Button and two HTML DIV elements.
The very first thing is to inherit the Google Maps, jQuery and jQuery UI JavaScript and CSS files. A jQuery click event handler has been assigned to the Button.
When the Button is clicked the jQuery UI Dialog Modal Popup is shown. Once the Modal Popup is opened, the Google Maps are loaded in the HTML DIV inside the jQuery UI Dialog Modal Popup.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
    $("#btnShow").click(function () {
        $("#dialog").dialog({
            modal: true,
            title: "Google Map",
            width: 600,
            hright: 450,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
                var mapOptions = {
                    center: new google.maps.LatLng(19.0606917, 72.83624970000005),
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map($("#dvMap")[0], mapOptions);
            }
        });
    });
});
</script>
<input id = "btnShow" type="button" value="Show Maps"/>
<div id="dialog" style="display: none">
<div id="dvMap" style="height: 380px; width: 580px;">
</div>
</div>
 
 
Screenshot
Display Google Maps inside jQuery Dialog Modal Popup Window
 
 
Demo
View Demo
 
Downloads

Download Code