title: How to use Webpack with Google Maps API?
body: <p>I am using Webpack + html-webpack-plugin to build all my static files. The thing is, when I am using it with Google Maps API, it's not working.</p>
  
  <p>I have this code:</p>
  
  <pre><code>var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    // the other code, irrelevant
  }
  </code></pre>
  
  <p>And a HTML file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;script async="async" defer="defer"
        src="https://maps.googleapis.com/maps/api/js?key=&lt;token here&gt;&amp;callback=initMap"&gt;
      &lt;/script&gt;
     &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I run just this file, everything works fine. But if I run this with, webpack it complaints about 'initMap is not a function'. I've looked inside the output, and it seems like initMap is declared not as global function, but as a function inside a module or something like that, so maybe that's the issue.</p>
  
  <p>How should I use Google Maps API with webpack? I know that I can bundle some libs with my script, such as react, should I do the same? What should be the approach here?</p>
  
  <p>UPD: Here is my webpack.config.js:</p>
  
  <pre><code>/* eslint-disable */
  const path = require('path')
  const fs = require('fs')
  const webpack = require('webpack')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  const nodeModules = {}
  fs.readdirSync('node_modules')
    .filter(function(x) {
      return ['.bin'].indexOf(x) === -1
    })
    .forEach(function(mod) {
      nodeModules[mod] = 'commonjs ' + mod
    })
  
  const htmlMinifierObj = {
    collapseWhitespace: true,
    removeComments: true
  }
  
  module.exports = [
  // the first object compiles backend, I didn't post it since it's unrelated
  {
   name: 'clientside, output to ./public',
   entry: {
     script: [path.join(__dirname, 'clientside', 'script.js')]
   },
   output: {
     path: path.join(__dirname, 'public'),
     filename: '[name].js'
   },
   module: {
     loaders: [
       {
         test: /\.js$/,
         loader: 'babel',
         query: { presets:['es2015', 'stage-0'] }
       }
     ],
   },
   plugins: [
     //new webpack.optimize.UglifyJsPlugin({minimize: true}),
     new HtmlWebpackPlugin({
       template: 'clientside/index.html',
       inject: 'body',
       chunks: ['script'],
       minify: htmlMinifierObj
     })
   ],
  }]
  </code></pre>
  
  <p>And the output HTML is (I've removed importing <code>script.js</code> from my source file, because it's added by webpack, and turned off the minimization, just for readability):</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href="/login/facebook"&gt;Login&lt;/a&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGSgj5Ts10UdapzUnWlr34NS5cuoBj7Wg&amp;callback=initMap"&gt;
      &lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>