From caf59eea8f1299d7382bd85087134540065d8f45 Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Sun, 2 Mar 2014 15:56:21 +0100
Subject: [PATCH] Simplify the google-map example

By creating the ol3 map div in the html, there is no need any
more to wait for the custom GMaps control to append the ol3 map
to its parent. This also fixes an issue that sometimes prevented
the ol3 map to appear, when the GMaps tiles were loaded before
the custom control's div was appended to its parent.
---
 examples/google-map.html |  9 +++-
 examples/google-map.js   | 93 ++++++++++++++++++----------------------
 2 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/examples/google-map.html b/examples/google-map.html
index c5c3942437..fd82495071 100644
--- a/examples/google-map.html
+++ b/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>
 
diff --git a/examples/google-map.js b/examples/google-map.js
index f6dd0a6994..2d5d2b1dc5 100644
--- a/examples/google-map.js
+++ b/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'), {
-  center: new google.maps.LatLng(0, 0),
-  zoom: 1,
+var gmap = new google.maps.Map(document.getElementById('gmap'), {
   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');
-olmap.style['width'] = '100%';
-olmap.style['height'] = '100%';
-gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olmap);
-
-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());
-  });
+var view = new ol.View2D();
+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());
+});
+
+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);