55 lines
2.2 KiB
HTML
55 lines
2.2 KiB
HTML
<!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>
|
|
<title></title>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
|
|
<link href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
<body>
|
|
<h3> jQuery UI demo </h3>
|
|
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$("#btnShow").click(function () {
|
|
$("#dialog").dialog({
|
|
modal: true,
|
|
title: "Google Map",
|
|
width: 600,
|
|
height: 450,
|
|
/*
|
|
buttons: {
|
|
Close: function () {
|
|
$(this).dialog('close');
|
|
}
|
|
},
|
|
*/
|
|
/*
|
|
https://api.jqueryui.com/dialog/
|
|
*/
|
|
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>
|
|
|
|
<!--iframe src="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=11&ie=UTF8&iwloc=&output=embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe-->
|
|
|
|
</body>
|
|
</html>
|