Merge pull request #1790 from ahocevar/simpliy-google-example

Simplify the google-map example

examples/google-map.html

@@ -13,6 +13,10 @@
     div.ol-logo {
       left: 65px;
     }
+    div.fill {
+      width: 100%;
+      height: 100%;
+    }
     </style>
     <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
     <title>Google Maps integration example</title>
@@ -31,7 +35,10 @@
 
       <div class="row-fluid">
         <div class="span12">
-          <div id="map" class="map"></div>
+          <div id="map" class="map">
+            <div id="gmap" class="fill"></div>
+            <div id="olmap" class="fill"></div>
+          </div>
         </div>
       </div>
 

examples/google-map.js

@@ -12,9 +12,7 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-var gmap = new google.maps.Map(document.getElementById('map'), {
+var gmap = new google.maps.Map(document.getElementById('gmap'), {
-  center: new google.maps.LatLng(0, 0),
-  zoom: 1,
   disableDefaultUI: true,
   keyboardShortcuts: false,
   draggable: false,
@@ -23,52 +21,45 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
   streetViewControl: false
 });
 
-var olmap = document.createElement('div');
+var view = new ol.View2D();
-olmap.style['width'] = '100%';
+view.on('change:center', function() {
-olmap.style['height'] = '100%';
+  var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
-gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olmap);
+  gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
-
-google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() {
-  var vector = new ol.layer.Vector({
-    source: new ol.source.GeoJSON({
-      url: 'data/geojson/countries.geojson',
-      projection: 'EPSG:3857'
-    }),
-    style: new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: 'rgba(255, 255, 255, 0.6)'
-      }),
-      stroke: new ol.style.Stroke({
-        color: '#319FD3',
-        width: 1
-      })
-    })
-  });
-
-  var center = gmap.getCenter();
-  var map = new ol.Map({
-    layers: [vector],
-    interactions: ol.interaction.defaults({
-      altShiftDragRotate: false,
-      dragPan: false,
-      touchRotate: false
-    }).extend([new ol.interaction.DragPan({kinetic: false})]),
-    renderer: 'canvas',
-    target: olmap,
-    view: new ol.View2D({
-      center: ol.proj.transform([center.lng(), center.lat()],
-          'EPSG:4326', 'EPSG:3857'),
-      zoom: gmap.getZoom()
-    })
-  });
-
-  var view = map.getView().getView2D();
-  view.on('change:center', function() {
-    var center = ol.proj.transform(view.getCenter(),
-        'EPSG:3857', 'EPSG:4326');
-    gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
-  });
-  view.on('change:resolution', function() {
-    gmap.setZoom(view.getZoom());
-  });
 });
+view.on('change:resolution', function() {
+  gmap.setZoom(view.getZoom());
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    url: 'data/geojson/countries.geojson',
+    projection: 'EPSG:3857'
+  }),
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.6)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#319FD3',
+      width: 1
+    })
+  })
+});
+
+var olMapDiv = document.getElementById('olmap');
+var map = new ol.Map({
+  layers: [vector],
+  interactions: ol.interaction.defaults({
+    altShiftDragRotate: false,
+    dragPan: false,
+    touchRotate: false
+  }).extend([new ol.interaction.DragPan({kinetic: false})]),
+  renderer: 'canvas',
+  target: olMapDiv,
+  view: view
+});
+view.setCenter([0, 0]);
+view.setZoom(1);
+
+olMapDiv.parentNode.removeChild(olMapDiv);
+gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);