ol3-google-maps
Version:
OpenLayers 3 Google Maps integration library
87 lines (75 loc) • 2.85 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, all" />
<title>OL3-Google-Maps overview map example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="../node_modules/openlayers/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../css/ol3gm.css" type="text/css" />
<link rel="stylesheet" href="./resources/layout.css" type="text/css" />
<style>
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
top: 0;
}
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
/* Remove attributions from the overview
They already appear on the main map */
.ol-custom-overviewmap .ol-overviewmap-map a {
display: none;
}
.ol-custom-overviewmap .ol-overviewmap-map a div img {
display: none;
}
.ol-custom-overviewmap .ol-overviewmap-map .gmnoprint {
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4>Overview map example</h4>
<p>
This example shows a Google Maps layer being used in an overview
control.
</p>
<p>
Since the overview control contains a different map instance, we
also need an different olGM instance for it.
</p>
<p>
There are two google maps layers visible at the same time, we need
to load them in sequence. As soon as the google maps instance in the
overview control is done loading, we activate the main one. When
using only one google maps layer, no delay is necessary.
</p>
<input id="toggle" type="button" onclick="toggle();"
value="Toggle between OL3 and GMAPS" />
</div>
</div>
</div>
<script src="../node_modules/openlayers/build/ol.js"></script>
<!-- When loading Google Maps outside of localhost, replace the src with
https://maps.googleapis.com/maps/api/js?v=3&key=mykey
where mykey is your Google Maps API key -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="/@loader"></script>
<script src="overviewmap.js"></script>
</body>
</html>