jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
68 lines (63 loc) • 2.81 kB
HTML
<html>
<head>
<title id="Description">This demo shows how to add a Google Map in jqxTabs.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<style type="text/css">
#map-canvas
{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(29.979234, 31.134202),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
$('#jqxtabs').jqxTabs({ width: getWidth("Tabs"), height: 400,
initTabContent: function (tab) {
if (tab === 0) {
google.maps.event.addDomListener(window, 'load', initialize);
}
}
});
});
</script>
</head>
<body>
<p style="font-family: Verdana;">
Great Pyramid of Giza</p>
<div id='jqxtabs'>
<ul style='margin-left: 20px;'>
<li>Map</li>
<li>Information</li>
</ul>
<div>
<div id="map-canvas">
</div>
</div>
<div>
The Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of
Cheops) is the oldest and largest of the three pyramids in the Giza Necropolis bordering
what is now El Giza, Egypt. It is the oldest of the Seven Wonders of the Ancient
World, and the only one to remain largely intact.</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>