title: React google maps url undefined
body: <p>I am trying to update the viewport bounds based on the markers coords in my react google maps component.</p>
  
  <p>However when I call the following line in componentWillMount()</p>
  
  <blockquote>
    <p>const bounds = new google.maps.LatLngBounds();</p>
  </blockquote>
  
  <p>I get an error that says google is not defined.</p>
  
  <p>To resolve this I have tried</p>
  
  <p>(1) Adding the google maps script tag to the index.html</p>
  
  <p>(2) Adding the line</p>
  
  <blockquote>
    <p>/* eslint-disable no-undef */</p>
  </blockquote>
  
  <p>to the top of my file.</p>
  
  <p>(3) Adding withScriptjs, withGoogleMap inside my compose() but it produces an error that says the googleMapUrl and the loading element is not defined. To solve this I tried doing</p>
  
  <pre><code>    &lt;MapSearchBox
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=APIKEY&amp;v=3.exp&amp;libraries=geometry,drawing,places"
          loadingElement={&lt;div style={{ height: `100%` }} /&gt;}
          isMarkerShown={this.state.isMarkerShown}
          onMarkerClick={this.handleMarkerClick}
      /&gt;
  </code></pre>
  
  <p>but this did not work.</p>
  
  <p>(4) Added /* global google */ to the top of my file</p>
  
  <p>Also some other small changes but nothing sticks. </p>
  
  <p>Please give some suggestions!</p>
  
  <p>MapWithASearchBox.js</p>
  
  <pre><code>/* global google */
  import React from 'react';
  import { get } from 'lodash';
  import { compose, withProps, lifecycle, defaultProps } from 'recompose';
  import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
  import PropTypes from 'prop-types';
  const { SearchBox } = require('react-google-maps/lib/components/places/SearchBox');
  import { buildMarkerObj } from '../../../imports/helpers/DataHelpers';
  
  const MapSearchBox = compose(
      withProps(props =&gt; ({
          googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=APIKEY=3.exp&amp;libraries=geometry,drawing,places',
          loadingElement: &lt;div style={{ height: `100%` }} /&gt;,
          containerElement: &lt;div style={{ height: `450px` }} /&gt;,
          mapElement: &lt;div style={{ height: `100%` }} /&gt;,
      })),
      withScriptjs,
      withGoogleMap,
      defaultProps({
          externalMarkers: [],
      }),
      lifecycle({
          componentWillMount() {
              const refs = {};
              const { lat, lng } = this.props.coords || (this.props.place &amp;&amp; this.props.place.coords) || {};
              const initialMarker = lat !== undefined &amp;&amp; lng !== undefined ? [buildMarkerObj({ lat, lng })] : [];
              console.log('THIS PROPS');
              console.log(this.props);
              console.log('PROPS');
  
              this.setState({
                  bounds: null,
                  center: {
                      lat: lat || 41.9,
                      lng: lng || -87.624,
                  },
                  markers: initialMarker,
                  injectedMarkers: this.props.markers || [],
                  onMapMounted: ref =&gt; {
                      refs.map = ref;
                  },
                  onBoundsChanged: () =&gt; {
  
                  },
                  onSearchBoxMounted: ref =&gt; {
                      refs.searchBox = ref;
                  },
                  onPlacesChanged: () =&gt; {
                      const places = refs.searchBox.getPlaces();
  
                      places.map(({ address_components, geometry: { location } }) =&gt; {
                          this.props.onSetLocation({
                              lat: location.lat(),
                              lng: location.lng(),
                          });
                      });
  
                      const nextMarkers = places.map(place =&gt; ({
                          position: place.geometry.location,
                      }));
                      const nextCenter = get(nextMarkers, '0.position', this.state.center);
  
                      this.setState({
                          center: nextCenter,
                          markers: nextMarkers,
                      });
                      // refs.map.fitBounds(bounds);
                  },
              })
              //ERROR HERE
              const bounds = new google.maps.LatLngBounds();
              this.props.markers.map((marker, index) =&gt; {
                  bounds.extend(new google.maps.LatLng(
                      marker.coords.lat,
                      marker.coords.lng
                  ));
              })
  
              refs.map.fitBounds(bounds);
              refs.map.panToBounds(bounds);
          },
      }),
  )
  ((props) =&gt;
      &lt;GoogleMap
          ref={props.onMapMounted}
          defaultZoom={15}
          center={props.center}
          onBoundsChanged={props.onBoundsChanged}
      &gt;
          &lt;SearchBox
              ref={props.onSearchBoxMounted}
              bounds={props.bounds}
              controlPosition={google.maps.ControlPosition.TOP_LEFT}
              onPlacesChanged={props.onPlacesChanged}
          &gt;
              &lt;input
                  type="text"
                  placeholder="Enter your area"
                  style={{
                      boxSizing: 'border-box',
                      border: '1px solid white',
                      width: '240px',
                      height: '32px',
                      marginTop: '12px',
                      padding: '0 12px',
                      borderRadius: '3px',
                      boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)',
                      fontSize: '14px',
                      outline: 'none',
                      textOverflow: 'ellipses',
                      backgroundColor: 'white',
                  }}
              /&gt;
          &lt;/SearchBox&gt;
          {props.markers.map((marker, index) =&gt;
              &lt;Marker key={`map-marker-${index}`} position={marker.position} /&gt;
          )}
          {props.externalMarkers.map((marker, index) =&gt;
              &lt;Marker key={`external-marker-${index}`} position={marker.coords} /&gt;
          )}
      &lt;/GoogleMap&gt;
      )
  
  class MapComponent extends React.PureComponent {
  
      constructor(props) {
          super(props);
          this.state = { isMarkerShown: false };
      }
  
      componentDidMount() {
          this.delayedShowMarker();
      }
  
      componentDidUpdate() {
          console.log('COMPONENT DID UPDATE');
          const bounds = new window.google.maps.LatLngBounds();
          this.props.markers.map((marker, index) =&gt; {
              bounds.extend(new window.google.maps.LatLng(
                  marker.coords.lat,
                  marker.coords.lng
              ));
          })
          refs.map.fitBounds(bounds);
          refs.map.panToBounds(bounds);
      }
  
      delayedShowMarker = () =&gt; {
          setTimeout(() =&gt; {
              this.setState({ isMarkerShown: true });
          }, 3000);
      }
  
      handleMarkerClick = () =&gt; {
          this.setState({ isMarkerShown: false });
          this.delayedShowMarker();
      }
  
      render() {
          return (
              &lt;MapSearchBox
                  isMarkerShown={this.state.isMarkerShown}
                  onMarkerClick={this.handleMarkerClick}
              /&gt;
          );
      }
  }
  
  MapComponent.propTypes = {
      className: PropTypes.string,
      latitude: PropTypes.string,
      longitude: PropTypes.string,
      externalMarkers: PropTypes.array,
  };
  
  MapComponent.defaultProps = {
      className: '',
      externalMarkers: [],
  };
  
  export default MapSearchBox;
  </code></pre>