Expose Resize Event on Google Maps

So I’ve been using this component for a while and ran into a known issue with the Google Maps Api v3. Namely this issue. The upshot being that when the component updates I need to trigger a resize event. Currently I’m doing this in the most horrible way imaginable:

export const ListingsMap = compose<WithScriptjsProps & WithGoogleMapProps, MapProps>(
  withProps({
    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&v=3.exp&libraries=geometry,drawing,places`,
    loadingElement: <div style={{height: `100%`}}/>,
    containerElement: <div id="map" className="map"/>,
    mapElement: <div id="map" className="map" ref="map"/>,
  }),
  withScriptjs,
  withGoogleMaps,
  lifecycle({
    componentDidMount() {
      google.maps.event.trigger((window as any).googleMapsObject, 'resize');
    },
    componentDidUpdate() {
      google.maps.event.trigger((window as any).googleMapsObject, 'resize');
    },
    componentWillMount() {
      const refs: { map?: GoogleMap} = {};
      this.setState({
        onMapWillMount: ref => {
          refs.map = ref;
          (window as any).googleMapsObject = (refs.map as Component<any>).context['__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'];
        },
      });
    },
  }),
)((props) => (
  <GoogleMap
    ref={props.onMapWillMount}
    options={mapOptions}
  />
));

I’ve cut a lot out for brevity, essentially my issue is that I want to have the ability to resize as an exposed feature. Or via the map object itself exposed via some stable means; I’m open to suggestions. However, I think we should at least in principal expose as much of the Google Maps Api as possible/feasible?

I am more than happy to work on this an submit a PR but thought I’d get some guidance first about implementation. Hopefully I’ve been thorough enough and you guys think this is worth some time 😄

[tomchentw]

Yeah, I remove the event trigger in v8.0.0 rewrite.

Since we have a jscodeshift API, I’m thinking we can just add event trigger function on the component itself:

refs.map.trigger('resize');

// in GoogleMap.js
trigger(...args) {
  return google.maps.event.trigger(this.context[MAP], ...args);
}

What do you think?

[StefanoPastore]

@tomchentw can i make a PR with your solution:

refs.map.trigger('resize');

// in GoogleMap.js
trigger(...args) {
  return google.maps.event.trigger(this.context[MAP], ...args);
}