No longer touching internal GMaps DOM elements.

Simple and effective: As soon as a map has a Google layer, the whole map viewport is added as control to the GMap. As soon as no Google layer is visible on the map any more, the map viewport is appended to the map container again. With this change, OpenLayers strictly limits its GMaps integration to the GMaps API.

Also note that there are no css overrides for the attribution any more. Instead, controls can now be conditionally positioned differently for Google layer by using the .olForeignContainer selector.

examples/google-v3.html

@@ -6,7 +6,6 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
         <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?v=3&amp;sensor=false"></script>
         <script src="../lib/OpenLayers.js"></script>
@@ -30,21 +29,6 @@
                 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>
-            <p>
-                <strong>Note on Google Maps API versioning:</strong>
-                This example uses the "nightly" version of Google Maps
-                API. This is specified by using <code>v=3</code> in the
-                the Google Maps API URL. Production applications should use the
-                "release" or "frozen" versions of Google Maps
-                API. See the <code>OpenLayers.Layer.Google.v3</code> API
-                docs, and the
-                <a href="https://developers.google.com/maps/documentation/javascript/basics#Versioning">Versioning Section</a>
-                of the Google Maps API docs, for more details.
             </p>
         </div>
     </body>

examples/google-v3.js

@@ -1,35 +1,34 @@
 var map;
 
 function init() {
-    map = new OpenLayers.Map('map');
+    map = new OpenLayers.Map('map', {
+        projection: 'EPSG:3857',
+        layers: [
+            new OpenLayers.Layer.Google(
+                "Google Physical",
+                {type: google.maps.MapTypeId.TERRAIN}
+            ),
+            new OpenLayers.Layer.Google(
+                "Google Streets", // the default
+                {numZoomLevels: 20}
+            ),
+            new OpenLayers.Layer.Google(
+                "Google Hybrid",
+                {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
+            ),
+            new OpenLayers.Layer.Google(
+                "Google Satellite",
+                {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
+            )
+        ],
+        center: new OpenLayers.LonLat(10.2, 48.9)
+            // Google.v3 uses web mercator as projection, so we have to
+            // transform our coordinates
+            .transform('EPSG:4326', 'EPSG:3857'),
+        zoom: 5
+    });
     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);
-    
     // add behavior to html
     var animate = document.getElementById("animate");
     animate.onclick = function() {

examples/spherical-mercator.html

@@ -17,6 +17,10 @@
             right: inherit;
             width: 400px;
         }
+        /* conditionally position control differently for Google Maps */
+        .olForeignContainer div.olControlMousePosition {
+            bottom: 28px;
+        }
         #map {
             height: 512px;
         }
@@ -38,7 +42,12 @@
     </p>
     <div id="map" class="smallmap"></div>
 
-    <div id="docs"></div>
+    <div id="docs">
+        <p>Note that maps with Google layers are a special case, because we
+            cannot control the position of the attribution. To conditionally
+            position controls differently for Google layers, prepend the
+            css selector with <code>.olForeignContainer</code>.</p>
+    </div>
     <script type="text/javascript">
 
     var map = new OpenLayers.Map({