caf59eea8f
By creating the ol3 map div in the html, there is no need any more to wait for the custom GMaps control to append the ol3 map to its parent. This also fixes an issue that sometimes prevented the ol3 map to appear, when the GMaps tiles were loaded before the custom control's div was appended to its parent.
66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
<style type="text/css">
|
|
div.ol-logo {
|
|
left: 65px;
|
|
}
|
|
div.fill {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
|
|
<title>Google Maps integration example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map">
|
|
<div id="gmap" class="fill"></div>
|
|
<div id="olmap" class="fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
|
|
<div class="span4">
|
|
<h4 id="title">Google Maps integration example</h4>
|
|
<p id="shortdesc">Example of a GMaps map with an ol3 map as control, to give users a Google base map with ol3 content on top.</p>
|
|
<div id="docs">
|
|
<p>See the <a href="google-map.js" target="_blank">google-map.js source</a> to see how this is done.</p>
|
|
</div>
|
|
<div id="tags">google</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="jquery.min.js" type="text/javascript"></script>
|
|
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
<script src="loader.js?id=google-map" type="text/javascript"></script>
|
|
|
|
</body>
|
|
</html>
|