Integrated gmaps API with webpack

package.json

@@ -14,6 +14,7 @@
     "express-validator": "^3.1.3",
     "jquery": "^3.2.1",
     "kerberos": "0.0.17",
+    "load-google-maps-api": "^1.0.0",
     "mellt": "^1.0.0",
     "minifier": "^0.8.1",
     "moment": "^2.12.0",

static/js/src/map.js

@@ -1,9 +1,10 @@
 'use strict';
-/* global google mapuser userid disp noHeader */
+/* global mapuser userid disp noHeader */
 
 // Webpack imports
 import io from 'socket.io-client';
 import $ from 'jquery';
+import google from 'google';
 
 // Variables
 var map, pano, marker, elevator, newLoc;

views/map.html

@@ -95,13 +95,10 @@
 {% block javascript %}
 {{super()}}
 	
-	<!-- socket.io -->
-	<!--<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js" integrity="sha256-WKvqiY0jZHWQZIohYEmr9KUC5rEaYEOFTq+ByllJK8w=" crossorigin="anonymous"></script>-->
 	<!-- google maps API -->
-	<script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key={{mapApi}}&callback=gmapsCb" async defer></script>
-	<!-- client-side javascript -->
+	<script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key={{mapApi}}" async></script>
+	<!-- webpacked javascript -->
 	<script type="application/javascript" src="/static/js/dist/map.js"></script>
-	<!--<script type="application/javascript" src="/static/js/.map.min.js"></script>-->
 	{% if user.id == mapuser.id %}
 		<!-- client-side controls javascript -->
 		<script type="application/javascript" src="/static/js/.map-controls.min.js"></script>

webpack.config.js

@@ -1,9 +1,12 @@
 var path = require('path');
 
 module.exports = {
-	entry: './static/map.js',
+	entry: './static/js/src/map.js',
 	output: {
 		filename: 'map.js',
-		path: path.resolve(__dirname, 'static/dist')
+		path: path.resolve(__dirname, 'static/js/dist')
+	},
+	externals: {
+		google: 'google'
 	}
 };