ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New GoogleNG layer using tiles from the v3 API's mapType::getTile method. r=bartvde (closes #3312)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12000 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-05-23 21:42:09 +00:00
parent 0c943fb5e0
commit 275889aa1a
10 changed files with 650 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
examples/google-ng.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OpenLayers Google NG Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlAttribution {
left: 5px;
right: inherit;
bottom: 5px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script src="../lib/OpenLayers.js"></script>
<script src="google-ng.js"></script>
</head>
<body onload="init()">
<h1 id="title">Google NG Layer Example</h1>
<div id="tags">
Google, api key, apikey
</div>
<p id="shortdesc">
Demonstrate use of tiles from the Google Maps v3 API.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
If you use OpenLayers.Layer.GoogleNG, the getTile method of the
GMaps v3 API's MapType is used to load tiles. This allows for
better integration than interacting with a whole map generated
by a google.maps.Map instance, as done with
OpenLayers.Layer.Google. See the
<a href="google-ng.js" target="_blank">google-ng.js source</a>
to see how this is done.
</p>
</div>
</body>
</html>

28
examples/google-ng.js Normal file
View File

@@ -0,0 +1,28 @@
var map;
function init() {
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.GoogleNG(
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.GoogleNG(
// ROADMAP, the default
);
var ghyb = new OpenLayers.Layer.GoogleNG(
{type: google.maps.MapTypeId.HYBRID}
);
var gsat = new OpenLayers.Layer.GoogleNG(
{type: google.maps.MapTypeId.SATELLITE}
);
map.addLayers([gphy, gmap, ghyb, gsat]);
// GoogleNG uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 5);
}