In this article, I will explain how to display Google Maps inside the jQuery UI Dialog Modal Popup window.
Here you can try this,
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
initializeGMap(button.data('lat'), button.data('lng'));
$("#location-map").css("width", "100%");
$("#map_canvas").css("width", "100%");
});
Demo - Click Here
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>
Source - Click Here