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

2012-02-14 00:07:57 +01:00
parent 2dabac734c
commit ce71a5a3fd
2 changed files with 81 additions and 0 deletions
--- a/examples/google-static.html
+++ b/examples/google-static.html
@@ -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>
--- a/examples/google-static.js
+++ b/examples/google-static.js
@@ -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());