Remove react-google-maps dependency

CHANGELOG.md

@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2020-XX-XX
 
+- [change] Remove react-google-maps dependency. It has not been maintained for 3 years. From now on,
+  we use Google Maps API directly. However, the default map provider is still Mapbox.
+  [#1389](https://github.com/sharetribe/ftw-daily/pull/1389)
 - [fix] Pass metadata through sanitizeUser function.
   [#1391](https://github.com/sharetribe/ftw-daily/pull/1391)
 - [fix] Call for the same page caused unnecessary rendering

package.json

@@ -47,7 +47,6 @@
     "react-dom": "^16.13.1",
     "react-final-form": "^6.5.1",
     "react-final-form-arrays": "^3.1.2",
-    "react-google-maps": "^9.4.5",
     "react-helmet-async": "^1.0.6",
     "react-intl": "^3.1.13",
     "react-moment-proptypes": "^1.6.0",
@@ -76,7 +75,6 @@
   },
   "resolutions": {
     "react-dates/lodash": "^4.17.19",
-    "react-google-maps/lodash": "^4.17.19",
     "react-test-renderer": "^16.13.1",
     "handlebars": "^4.5.3",
     "serialize-javascript": "^2.1.1"

src/components/Map/DynamicGoogleMap.js

@@ -1,57 +1,43 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { number, object, shape, string } from 'prop-types';
-import { withGoogleMap, GoogleMap, Marker, Circle } from 'react-google-maps';
+import classNames from 'classnames';
+import { circlePolyline } from '../../util/maps';
 import config from '../../config';
 
 /**
- * DynamicGoogleMap uses withGoogleMap HOC.
- * It handles some of the google map initialization states.
+ * DynamicGoogleMap uses Google Maps API.
  */
-const DynamicGoogleMap = withGoogleMap(props => {
-  const { center, zoom, address, mapsConfig } = props;
-
-  const { enabled, url, anchorX, anchorY, width, height } = mapsConfig.customMarker;
-  const markerIcon = enabled
-    ? {
-        icon: {
-          url,
-
-          // The origin for this image is (0, 0).
-          origin: new window.google.maps.Point(0, 0),
-          size: new window.google.maps.Size(width, height),
-          anchor: new window.google.maps.Point(anchorX, anchorY),
-        },
-      }
-    : {};
-
-  const marker = <Marker position={center} {...markerIcon} title={address} />;
-
-  const circleProps = {
-    options: {
-      fillColor: mapsConfig.fuzzy.circleColor,
-      fillOpacity: 0.2,
-      strokeColor: mapsConfig.fuzzy.circleColor,
-      strokeOpacity: 0.5,
-      strokeWeight: 1,
-      clickable: false,
-    },
-    radius: mapsConfig.fuzzy.offset,
-    center,
-  };
-
-  const circle = <Circle {...circleProps} />;
-
-  const controlPosition =
-    typeof window !== 'undefined' && typeof window.google !== 'undefined'
-      ? window.google.maps.ControlPosition.LEFT_TOP
-      : 5;
-
-  return (
-    <GoogleMap
-      defaultZoom={zoom}
-      defaultCenter={center}
-      center={center}
-      options={{
+class DynamicGoogleMap extends Component {
+  constructor(props) {
+    super(props);
+    this.map = null;
+    this.mapContainer = null;
+
+    this.initializeMap = this.initializeMap.bind(this);
+  }
+
+  componentDidMount(prevProps) {
+    if (!this.map && this.mapContainer) {
+      this.initializeMap();
+    }
+  }
+
+  initializeMap() {
+    const { offsetHeight, offsetWidth } = this.mapContainer;
+    const hasDimensions = offsetHeight > 0 && offsetWidth > 0;
+
+    if (hasDimensions) {
+      const { center, zoom, address, mapsConfig } = this.props;
+      const { enabled, url, anchorX, anchorY, width, height } = mapsConfig.customMarker;
+      const maps = window.google.maps;
+      const controlPosition = window.google.maps.ControlPosition.LEFT_TOP;
+
+      const mapConfig = {
+        center,
+        zoom,
+        // Disable all controls except zoom
+        // https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
+
         // Disable map type (ie. Satellite etc.)
         mapTypeControl: false,
         // Disable zooming by scrolling
@@ -64,12 +50,66 @@ const DynamicGoogleMap = withGoogleMap(props => {
         zoomControlOptions: {
           position: controlPosition,
         },
-      }}
-    >
-      {mapsConfig.fuzzy.enabled ? circle : marker}
-    </GoogleMap>
-  );
-});
+      };
+
+      this.map = new maps.Map(this.mapContainer, mapConfig);
+
+      if (mapsConfig.fuzzy.enabled) {
+        const GoogleLatLng = window.google.maps.LatLng;
+        // Origin as object literal (LatLngLiteral)
+        const origin = { lat: center.lat, lng: center.lng };
+        const radius = mapsConfig.fuzzy.offset;
+        const path = circlePolyline(origin, radius).map(c => new GoogleLatLng(c[0], c[1]));
+
+        const circleProps = {
+          options: {
+            fillColor: mapsConfig.fuzzy.circleColor,
+            fillOpacity: 0.2,
+            strokeColor: mapsConfig.fuzzy.circleColor,
+            strokeOpacity: 0.5,
+            strokeWeight: 1,
+            clickable: false,
+          },
+          path,
+          map: this.map,
+        };
+
+        // Add a circle. We use Polygon because the default Circle class is not round enough.
+        const Polygon = window.google.maps.Polygon;
+        new Polygon(circleProps);
+      } else {
+        const markerIcon = enabled
+          ? {
+              icon: {
+                url,
+
+                // The origin for this image is (0, 0).
+                origin: new window.google.maps.Point(0, 0),
+                size: new window.google.maps.Size(width, height),
+                anchor: new window.google.maps.Point(anchorX, anchorY),
+              },
+            }
+          : {};
+
+        const marker = new window.google.maps.Marker({
+          position: center,
+          map: this.map,
+          title: address,
+          ...markerIcon,
+        });
+      }
+    }
+  }
+
+  render() {
+    const { containerClassName, mapClassName } = this.props;
+    return (
+      <div className={containerClassName}>
+        <div className={mapClassName} ref={el => (this.mapContainer = el)} />
+      </div>
+    );
+  }
+}
 
 DynamicGoogleMap.defaultProps = {
   address: '',

src/components/Map/Map.js

@@ -41,8 +41,6 @@ export class Map extends Component {
       <StaticMap center={location} zoom={zoom} address={address} mapsConfig={mapsConfig} />
     ) : (
       <DynamicMap
-        containerElement={<div className={classes} />}
-        mapElement={<div className={mapClasses} />}
         containerClassName={classes}
         mapClassName={mapClasses}
         center={location}

src/components/ResponsiveImage/ResponsiveImage.js

@@ -49,8 +49,6 @@ const ResponsiveImage = props => {
   if (image == null || variants.length === 0) {
     const noImageClasses = classNames(rootClassName || css.root, css.noImageContainer, className);
 
-    // NoImageMessage is needed for listing images on top the map (those component lose context)
-    // https://github.com/tomchentw/react-google-maps/issues/578
     const noImageMessageText = noImageMessage || <FormattedMessage id="ResponsiveImage.noImage" />;
     return (
       <div className={noImageClasses}>

src/components/SearchMap/SearchMap.js

@@ -114,6 +114,7 @@ export class SearchMapComponent extends Component {
 
   render() {
     const {
+      id,
       className,
       rootClassName,
       reusableContainerClassName,
@@ -145,11 +146,9 @@ export class SearchMapComponent extends Component {
     // When changing from default map provider to Google Maps, you should use the following
     // component instead of SearchMapWithMapbox:
     //
-    // <SearchMapWithGoogleMap
-    //   containerElement={
-    //     <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
-    //   }
-    //   mapElement={<div className={mapRootClassName || css.mapRoot} />}
+    // <SearchMapWithGoogleMaps
+    //   id={id}
+    //   className={classes}
     //   bounds={bounds}
     //   center={center}
     //   location={location}
@@ -158,10 +157,12 @@ export class SearchMapComponent extends Component {
     //   activeListingId={activeListingId}
     //   mapComponentRefreshToken={this.state.mapReattachmentCount}
     //   createURLToListing={this.createURLToListing}
+    //   onClick={this.onMapClicked}
     //   onListingClicked={this.onListingClicked}
     //   onListingInfoCardClicked={this.onListingInfoCardClicked}
     //   onMapLoad={this.onMapLoadHandler}
     //   onMapMoveEnd={onMapMoveEnd}
+    //   reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
     //   zoom={zoom}
     // />
 
@@ -173,6 +174,7 @@ export class SearchMapComponent extends Component {
         messages={messages}
       >
         <SearchMapWithMapbox
+          id={id}
           className={classes}
           bounds={bounds}
           center={center}
@@ -182,13 +184,13 @@ export class SearchMapComponent extends Component {
           activeListingId={activeListingId}
           mapComponentRefreshToken={this.state.mapReattachmentCount}
           createURLToListing={this.createURLToListing}
+          onClick={this.onMapClicked}
           onListingClicked={this.onListingClicked}
           onListingInfoCardClicked={this.onListingInfoCardClicked}
           onMapLoad={this.onMapLoadHandler}
-          onClick={this.onMapClicked}
           onMapMoveEnd={onMapMoveEnd}
-          zoom={zoom}
           reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
+          zoom={zoom}
         />
       </ReusableMapContainer>
     ) : (
@@ -198,6 +200,7 @@ export class SearchMapComponent extends Component {
 }
 
 SearchMapComponent.defaultProps = {
+  id: 'searchMap',
   className: null,
   rootClassName: null,
   mapRootClassName: null,
@@ -212,6 +215,7 @@ SearchMapComponent.defaultProps = {
 };
 
 SearchMapComponent.propTypes = {
+  id: string,
   className: string,
   rootClassName: string,
   mapRootClassName: string,