Modal Popup in Google Maps Using Jquery Dialog

Showing Google Map in a web page is a very common task. But sometimes we need to show the Google Map in Popup. In such cases we may experience some issues. To resolve those issues here I will describe how to display Google Map in modal popup. To achieve the modal popup we are going to use Jquery Modal Dialog. Which is very common & more popular. Displaying modal popup in Google Maps – we need to add below Javascript & CSS files in our HTML page Head section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtfcf3X49lTTj0k3Vqc__Vsm8bGKE_lOw&callback=myMap"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

Note: If you are using Google Maps first time then you have to have to collect Google API Key. It’s free. To generate your free Google API Key follow the below link:

https://console.developers.google.com

Google Maps need an API key in the key parameter when loading an API. Set it into the above mentioned 3rd script key param.

Prepare JQuery Dialog Container:

Google Maps need to render into HTML containers. It could be DIV. Since we are going to display Google Map in a modal popup using JQuery UI Dialog so we need to define map container within the dialog DIV like below:

<h4>Google Map Modal Popup On Click Event</h4>
<input id = "cmdDisplayMap" type="button" value="Show Modal Map"/>
<div id="modalMapDialog" style="display: none">
	<div id="MapContainer" style="height: 430px; width: 100%;"></div>
</div>

“h4” element is used to add a header in our web page. The button is used to show the modal popup. The “modalMapDialog” is used for JQuery Dialog Container. “MapContainer” Div will be used to render modal popup in Google Maps. Adjust height & width CSS properties as per your need.

Javascript Code for JQuery Modal Popup and Google Maps:

To configure JQuery modal popup we have to use JQuery Dialog UI. So we need to invoke dialog method whenever a user click on the button. Here the button is “cmdDisplayMap”. After that you have to define the Google Map properties & marker like below:

$(function () {
    $("#cmdDisplayMap").click(function () {
        $("#modalMapDialog").dialog({
            modal: true,
            title: "Dhaka City Google Map",
            width: 550,
            hright: 500,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
				  var renderContainer = document.getElementById("MapContainer");
				  var myPos = new google.maps.LatLng(23.777176, 90.399452); 
				  var mapProp = {center: myPos, zoom: 9};
				  var map = new google.maps.Map(renderContainer,mapProp);
				  var marker = new google.maps.Marker({
				    position: myPos
				  });
				  marker.setMap(map);                
            }
        });
    });
});

If you look at the above code, the dialog function is configured for modal popup. Adjust width & height properties considering map container DIV. Here the special function is “open”. Which is used for displaying “Modal Popup in Google Maps“. The “renderContainer” variable holds the reference of Map DIV Container. The position property holds the latitude and longitude coordinates of a location. Center denotes the map position. Rest others are self explanatory. Modify the parameters as needed.

Screenshot for Modal Popup in Google Maps:

Display Google Maps inside jQuery Dialog Modal Popup Window

Complete Code of Displaying Google Maps inside JQuery Dialog Modal Popup Window:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtfcf3X49lTTj0k3Vqc__Vsm8bGKE_lOw&callback=myMap"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script type="text/javascript">
$(function () {
    $("#cmdDisplayMap").click(function () {
        $("#modalMapDialog").dialog({
            modal: true,
            title: "Dhaka City Google Map",
            width: 550,
            hright: 500,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
				  var renderContainer = document.getElementById("MapContainer");
				  var myPos = new google.maps.LatLng(23.777176, 90.399452); 
				  var mapProp = {center: myPos, zoom: 9};
				  var map = new google.maps.Map(renderContainer,mapProp);
				  var marker = new google.maps.Marker({
				    position: myPos
				  });
				  marker.setMap(map);                
            }
        });
    });
});
</script>
</head>

<body>

<h4>Google Map Modal Popup On Click Event</h4>
<input id = "cmdDisplayMap" type="button" value="Show Modal Map"/>
<div id="modalMapDialog" style="display: none">
	<div id="MapContainer" style="height: 430px; width: 100%;"></div>
</div>

</body>
</html>

Save the HTML file & examine google map popup on click event. If you face any issue please let us know through comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code