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

Google Static Maps API. Simple and limited to 1000 views.

Browse Source
This commit is contained in:
ahocevar
2012-02-14 00:07:57 +01:00
parent 2dabac734c
commit ce71a5a3fd
2 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
examples/google-static.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 (Static Maps API) Grid Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1 id="title">Google (Static Maps API) Grid Layer Example</h1>
<div id="tags">
Google, grid, static, GMaps
</div>
<p id="shortdesc">
Using the Google Static Maps API with a Grid Layer.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
A Grid layer with a custom <code>getURL</code> method can be
used to request static maps for a specific extent and zoom
level. The Google Static Maps API is the most reliable way to
get Google base maps in OpenLayers. Note, however, that this is
limited to 1000 page views per viewer. Every map center or zoom
level change increases the page view counter by 1.
</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="google-static.js"></script>
</body>
</html>

48
examples/google-static.js Normal file
View File

@@ -0,0 +1,48 @@
var options = {
singleTile: true,
ratio: 1,
isBaseLayer: true,
wrapDateLine: true,
getURL: function() {
var center = this.map.getCenter().transform("EPSG:3857", "EPSG:4326"),
size = this.map.getSize();
return [
this.url, "&center=", center.lat, ",", center.lon,
"&zoom=", this.map.getZoom(), "&size=", size.w, "x", size.h
].join("");
}
};
var map = new OpenLayers.Map({
div: "map",
maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
maxResolution: 156543.03390625,
units: "m",
projection: "EPSG:3857",
numZoomLevels: 22,
layers: [
new OpenLayers.Layer.Grid(
"Google Physical",
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=terrain",
null, options
),
new OpenLayers.Layer.Grid(
"Google Streets",
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=roadmap",
null, options
),
new OpenLayers.Layer.Grid(
"Google Hybrid",
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=hybrid",
null, options
),
new OpenLayers.Layer.Grid(
"Google Satellite",
"http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=satellite",
null, options
)
],
center: new OpenLayers.LonLat(10.2, 48.9).transform("EPSG:4326", "EPSG:3857"),
zoom: 5
});
map.addControl(new OpenLayers.Control.LayerSwitcher());