/* @flow */
import React from 'react';
import { GoogleMap } from 'react-google-maps';
import ScriptjsLoader from 'react-google-maps/lib/async/ScriptjsLoader';
import { latLon } from '../../../types/map';

type Props = {
  spanFullPage: ?boolean,
  defaultCenter: latLon,
};

/** @class Map */
function Map(props : Props) {
  const containerElement = (
    <div
      style={{
        height: '200px',
        ...(props.spanFullPage ? { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, height: '100%', width: '100%' } : {}),
      }}
    />
  );

  const googleMapElement = (
    <GoogleMap
      defaultZoom={15}
      defaultCenter={props.defaultCenter}
    />
  );

  return (
    <ScriptjsLoader
      hostname={'maps.googleapis.com'}
      pathname={'/maps/api/js'}
      query={{ key: process.env.GOOGLE_MAPS_API_KEY, v: '3.0' }}
      loadingElement={
        <div />
      }
      containerElement={containerElement}
      googleMapElement={googleMapElement}
    />
  );
}

export default Map;

/* @flow */
import React from 'react';
import { GoogleMap } from 'react-google-maps';
import ScriptjsLoader from 'react-google-maps/lib/async/ScriptjsLoader';
import { latLon } from '../../../types/map';

type Props = {
  spanFullPage: ?boolean,
  defaultCenter: latLon,
};

/** @class Map */
function Map(props : Props) {
  const containerElement = (
    <div
      style={{
        height: '200px',
        ...(props.spanFullPage ? { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, height: '100%', width: '100%' } : {}),
      }}
    />
  );

  const googleMapElement = (
    <GoogleMap
      defaultZoom={15}
      defaultCenter={props.defaultCenter}
    />
  );

  return (
    <ScriptjsLoader
      hostname={'maps.googleapis.com'}
      pathname={'/maps/api/js'}
      query={{ v: '3.0' }}
      loadingElement={
        <div />
      }
      containerElement={containerElement}
      googleMapElement={googleMapElement}
    />
  );
}

export default Map;

--- 
+++ 
@@ -31,7 +31,7 @@
     <ScriptjsLoader
       hostname={'maps.googleapis.com'}
       pathname={'/maps/api/js'}
-      query={{ v: '3.0' }}
+      query={{ key: process.env.GOOGLE_MAPS_API_KEY, v: '3.0' }}
       loadingElement={
         <div />
       }
Use API key from Env when loading google maps script
