title: GoogleMaps does not load on page load
body: <p>I can't get my map running using the GoogleMaps API V3. The map does not load. I would expect the map to appear in the div with the id <code>gisMap</code> but in the Chrome Debugger I get the message: </p>
  
  <pre><code>Uncaught InvalidValueError: initMap is not a function
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var map;
  
  function initMap() {
      // Enabling new cartography and themes
      google.maps.visualRefresh = true;
  
      // Setting starting options
      var mapOptions = {
          center: new google.maps.LatLng(39.9078, 32.8252),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      // Getting Map DOM Element
      var mapElement = document.getElementById('gisMap');
  
      // Creating a map with DOM element
      map = new google.maps.Map(mapElement, mapOptions);
  }
  </code></pre>
  
  <p><strong>Bundle.js (excerpt)</strong></p>
  
  <pre><code>(...)
  module.exports = Vue;
  }).call(this,require('_process'))
  },{"_process":1}],3:[function(require,module,exports){
  'use strict';
  
  var map;
  
  function initMap() {
      // Enabling new cartography and themes
      google.maps.visualRefresh = true;
  
      // Setting starting options
      var mapOptions = {
          center: new google.maps.LatLng(39.9078, 32.8252),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      // Getting Map DOM Element
      var mapElement = document.getElementById('gisMap');
  
      // Creating a map with DOM element
      map = new google.maps.Map(mapElement, mapOptions);
  }
  
  },{}],4:[function(require,module,exports){
  'use strict';
  
  var Vue = require('vue');
  
  new Vue({});
  (...)
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;MFServer Test&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="/css/app.css"&gt;
  &lt;/head&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;MFDispo&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Start&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;GIS&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
      &lt;body id="app"&gt;
          &lt;div class="pageWrapper"&gt;
              &lt;div id="gisMap"&gt;&lt;/div&gt;
              &lt;div id="content"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="/js/bundle.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&amp;callback=initMap" async defer&gt;&lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
  @import "partials/forms";
  
  html, body {
    height: 100%;
    padding-top: 25px;
  }
  
  .pageWrapper {
    background-color: red;
    height:100%;
    width: 100%;
  }
  
  #gisMap {
    height: 100%;
    width: 50%;
    background-color: green;
  }
  </code></pre>