Merge pull request #673 from sharetribe/fix-map-relocated

After editing listing location, map should show that new location

src/components/Map/Map.css

@@ -2,3 +2,8 @@
   width: 100%;
   height: 100%;
 }
+
+.mapRoot {
+  width: 100%;
+  height: 100%;
+}

src/components/Map/Map.js

@@ -1,73 +1,86 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { string, number } from 'prop-types';
+import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
-
 import CustomMarker from './images/marker-32x32.png';
 import css from './Map.css';
 
-class Map extends Component {
+/**
+ * MapWithGoogleMap uses withGoogleMap HOC.
+ * It handles some of the google map initialization states.
+ */
+const MapWithGoogleMap = withGoogleMap(props => {
+  const { center, zoom, address } = props;
+
+  const customMarker = {
+    url: CustomMarker,
+    // This marker is 32 pixels wide by 32 pixels high.
+    size: new window.google.maps.Size(32, 32),
+    // The origin for this image is (0, 0).
+    origin: new window.google.maps.Point(0, 0),
+    // The anchor for the marker is in the bottom center.
+    anchor: new window.google.maps.Point(16, 32),
+  };
+
+  return (
+    <GoogleMap
+      defaultZoom={zoom}
+      defaultCenter={center}
+      center={center}
+      options={{
+        // Disable map type (ie. Satellite etc.)
+        mapTypeControl: false,
+        // Disable zooming by scrolling
+        scrollwheel: false,
+        // Fullscreen control toggle
+        fullscreenControl: true,
+      }}
+    >
+      <Marker position={center} icon={customMarker} title={address} />
+    </GoogleMap>
+  );
+});
+
+export class Map extends Component {
   componentDidMount() {
     const mapsLibLoaded = window.google && window.google.maps;
     if (!mapsLibLoaded) {
       throw new Error('Google Maps API must be loaded for the Map component');
     }
-
-    const { center, zoom, address } = this.props;
-    const centerLocation = { lat: center.lat, lng: center.lng };
-    const mapOptions = {
-      center: centerLocation,
-      zoom,
-
-      // Disable Map Type ie. Satellite etc.
-      mapTypeControl: false,
-
-      // Disable zooming by scrolling
-      scrollwheel: false,
-    };
-    const map = new window.google.maps.Map(this.el, mapOptions);
-
-    const customMarker = {
-      url: CustomMarker,
-      // This marker is 32 pixels wide by 32 pixels high.
-      size: new window.google.maps.Size(32, 32),
-      // The origin for this image is (0, 0).
-      origin: new window.google.maps.Point(0, 0),
-      // The anchor for the marker is in the bottom center.
-      anchor: new window.google.maps.Point(16, 32),
-    };
-
-    new window.google.maps.Marker({
-      position: centerLocation,
-      map,
-      icon: customMarker,
-      title: address,
-    });
   }
 
   render() {
-    const { className, rootClassName } = this.props;
+    const { className, rootClassName, mapRootClassName, address, center, zoom } = this.props;
     const classes = classNames(rootClassName || css.root, className);
+    const mapClasses = mapRootClassName || css.mapRoot;
+    const centerLocationForGoogleMap = { lat: center.lat, lng: center.lng };
+
     return (
-      <div
-        className={classes}
-        ref={el => {
-          this.el = el;
-        }}
+      <MapWithGoogleMap
+        containerElement={<div className={classes} onClick={this.onMapClicked} />}
+        mapElement={<div className={mapClasses} />}
+        center={centerLocationForGoogleMap}
+        zoom={zoom}
+        address={address}
       />
     );
   }
 }
 
-Map.defaultProps = { className: '', rootClassName: null, zoom: 11 };
-
-const { string, number } = PropTypes;
+Map.defaultProps = {
+  className: '',
+  rootClassName: null,
+  mapRootClassName: null,
+  zoom: 11,
+};
 
 Map.propTypes = {
-  address: string.isRequired,
-  center: propTypes.latlng.isRequired,
   className: string,
   rootClassName: string,
+  mapRootClassName: string,
+  address: string.isRequired,
+  center: propTypes.latlng.isRequired,
   zoom: number,
 };