add support for GMaps v3. Thanks tschaub for the big improvements to my original patch. p=tschaub,me, r=tschaub (closes #2493)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10474 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2010-07-09 12:01:11 +00:00
parent 4d3a1eebf7
commit 64842fd711
10 changed files with 2078 additions and 357 deletions
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Google (v3) 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">
+        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="google-v3.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Google (v3) Layer Example</h1>
+        <p id="shortdesc">
+            Demonstrate use the Google Maps v3 API.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                If you use the Google Maps v3 API with a Google layer, you don't
+                need to include an API key.  This layer only works in the 
+                spherical mercator projection.  See the 
+                <a href="google-v3.js" target="_blank">google-v3.js source</a> 
+                to see how this is done.
+            <p>
+                In order to position the Google attribution div in the default 
+                location, you must include the extra theme/default/google.css 
+                stylesheet.
+            </p>
+        </div>
+    </body>
+</html>
@@ -0,0 +1,32 @@
+var map;
+
+function init() {
+    map = new OpenLayers.Map('map');
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+    
+    var gphy = new OpenLayers.Layer.Google(
+        "Google Physical",
+        {type: google.maps.MapTypeId.TERRAIN}
+    );
+    var gmap = new OpenLayers.Layer.Google(
+        "Google Streets", // the default
+        {numZoomLevels: 20}
+    );
+    var ghyb = new OpenLayers.Layer.Google(
+        "Google Hybrid",
+        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
+    );
+    var gsat = new OpenLayers.Layer.Google(
+        "Google Satellite",
+        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
+    );
+
+    map.addLayers([gphy, gmap, ghyb, gsat]);
+
+    // Google.v3 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);
+}
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers OSM and Google 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">
+        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="osm-google.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">OSM and Google Together</h1>
+        <p id="shortdesc">
+            Demonstrate use of an OSM layer and a Google layer as base layers.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                The Google(v3) layer and the OSM are both in the same projection
+                - spherical mercator - and can be used on a map together.
+                See the <a href="osm-google.js" target="_blank">
+                osm-google.js source</a> to see how this is done.
+            </p>
+        </div>
+    </body>
+</html>
@@ -0,0 +1,28 @@
+var map;
+
+function init() {
+    map = new OpenLayers.Map({
+        div: "map",
+        projection: new OpenLayers.Projection("EPSG:900913"),
+        units: "m",
+        maxResolution: 156543.0339,
+        maxExtent: new OpenLayers.Bounds(
+            -20037508, -20037508, 20037508, 20037508.34
+        )
+    });
+    
+    var osm = new OpenLayers.Layer.OSM();            
+    var gmap = new OpenLayers.Layer.Google("Google Streets");
+    
+    map.addLayers([osm, gmap]);
+
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+
+    map.setCenter(
+        new OpenLayers.LonLat(10.2, 48.9).transform(
+            new OpenLayers.Projection("EPSG:4326"),
+            map.getProjectionObject()
+        ), 
+        5
+    );
+}