When modifying the map control position google is undefined

[carlosperalta88]

I have this component:

import React, { Component } from 'react';
import { GoogleMap } from 'react-google-maps';
import { default as ScriptjsLoader } from 'react-google-maps/lib/async/ScriptjsLoader';
import { createHistory } from 'history';

export default class MapComponent extends Component {
  state = {
    mapLocation: {
      position: { lat: -33.42794, lng: -70.60933 }
    }
  }

  getCurrentUrl(currentLocation) {
    return (currentLocation.substr(0, currentLocation.indexOf('/lat'))=='') ? currentLocation : currentLocation.substr(0, currentLocation.indexOf('/lat'))
  }

  handlePositionChanged() {
    const history = createHistory()
    const newPos = { lat: this.refs.googleMap.getCenter().lat(), lng: this.refs.googleMap.getCenter().lng() }
    const currentUrl = this.getCurrentUrl(window.location.pathname)

    console.log(this.refs.googleMap.getBounds().getNorthEast().lat());
    console.log(this.refs.googleMap.getBounds().getNorthEast().lng());
    history.replace(`${currentUrl}/lat=${newPos.lat},lng=${newPos.lng}`);
  }

  renderMap() {
    const { position } = this.state.mapLocation;

    return (<ScriptjsLoader
      hostname={"maps.googleapis.com"}
      pathname={"/maps/api/js"}
      query={{ v: 3.23, libraries: 'geometry,drawing,places', key:'AIzaSyCd-29BjBduuKSRcDBtzyCvosvJl9TqfyU' }}
      loadingElement={
        <div>Loading</div>
      }
      containerElement={<div style={{ height: '100%' }} />}
      googleMapElement={
        <GoogleMap
          ref={googleMap => {
            if(!googleMap) return;
            console.log(googleMap)
          }}
          defaultZoom={15}
          defaultCenter={position}
          defaultOptions={{ mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_CENTER } }}
          onDragend={::this.handlePositionChanged}
        />
      }
            />
            );
  }

  render() {
    return this.renderMap();
  }
}

the called for google.maps on defaultOptions is undefined. If is being loaded asynchronously why is this happening? Thanks in advance

[tomchentw]

Since google is asynchronously loaded, you have to handle the logic yourself.

We're also looking for maintainers. Involve in #266 to help strengthen our community!