Change map provider to Google Maps

public/index.html

@@ -147,17 +147,18 @@
       NOTE: remember to update mapbox-sdk.min.js to a new version regularly.
       mapbox-sdk.min.js is included from static folder for CSP purposes.
       We didn't bundle it to the main app since it would unnecessarily slow down initial rendering.
-    -->
     <script src="%PUBLIC_URL%/static/scripts/mapbox/mapbox-sdk.min.js"></script>
     <link href="https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css" rel="stylesheet" />
     <script src="https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js"></script>
     <script>
       window.mapboxgl.accessToken = '%REACT_APP_MAPBOX_ACCESS_TOKEN%';
     </script>
+    -->
     <!--
       If Google Maps is used instead of Mapbox, you need to include Google's script instead:
-      <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&libraries=places"></script>
     -->
+      <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&libraries=places"></script>
+
 
     <!--
          Stripe script should be on every page, not just the pages that

src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js

@@ -9,8 +9,8 @@ import config from '../../config';
 
 import IconHourGlass from './IconHourGlass';
 import IconCurrentLocation from './IconCurrentLocation';
-import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderMapbox';
+//import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderMapbox';
-// import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderGoogleMaps';
+import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderGoogleMaps';
 
 import css from './LocationAutocompleteInput.css';
 

src/components/Map/Map.js

@@ -3,8 +3,8 @@ import { bool, number, object, string } from 'prop-types';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import config from '../../config';
-import { StaticMap, DynamicMap, isMapsLibLoaded } from './MapboxMap';
+// import { StaticMap, DynamicMap, isMapsLibLoaded } from './MapboxMap';
-// import { StaticMap, DynamicMap, isMapsLibLoaded } from './GoogleMap';
+import { StaticMap, DynamicMap, isMapsLibLoaded } from './GoogleMap';
 
 import css from './Map.css';
 

src/components/SearchMap/SearchMap.js

@@ -10,14 +10,14 @@ import { obfuscatedCoordinates } from '../../util/maps';
 import config from '../../config';
 
 import { hasParentWithClassName } from './SearchMap.helpers.js';
-import SearchMapWithMapbox, {
+import SearchMapWithGoogleMap, {
   LABEL_HANDLE,
   INFO_CARD_HANDLE,
   getMapBounds,
   getMapCenter,
   fitMapToBounds,
   isMapsLibLoaded,
-} from './SearchMapWithMapbox';
+} from './SearchMapWithGoogleMap';
 import ReusableMapContainer from './ReusableMapContainer';
 import css from './SearchMap.css';
 
@@ -117,6 +117,7 @@ export class SearchMapComponent extends Component {
       className,
       rootClassName,
       reusableContainerClassName,
+      mapRootClassName,
       bounds,
       center,
       location,
@@ -144,11 +145,8 @@ export class SearchMapComponent extends Component {
     // When changing from default map provider to Google Maps, you should use the following
     // component instead of SearchMapWithMapbox:
     //
-    // <SearchMapWithGoogleMap
+    // <SearchMapWithMapbox
-    //   containerElement={
+    //   className={classes}
-    //     <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
-    //   }
-    //   mapElement={<div className={mapRootClassName || css.mapRoot} />}
     //   bounds={bounds}
     //   center={center}
     //   location={location}
@@ -160,8 +158,10 @@ export class SearchMapComponent extends Component {
     //   onListingClicked={this.onListingClicked}
     //   onListingInfoCardClicked={this.onListingInfoCardClicked}
     //   onMapLoad={this.onMapLoadHandler}
+    //   onClick={this.onMapClicked}
     //   onMapMoveEnd={onMapMoveEnd}
     //   zoom={zoom}
+    //   reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
     // />
 
     return isMapsLibLoaded() ? (
@@ -170,8 +170,11 @@ export class SearchMapComponent extends Component {
         reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
         onReattach={forceUpdateHandler}
       >
-        <SearchMapWithMapbox
+        <SearchMapWithGoogleMap
-          className={classes}
+          containerElement={
+            <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
+          }
+          mapElement={<div className={mapRootClassName || css.mapRoot} />}
           bounds={bounds}
           center={center}
           location={location}
@@ -183,10 +186,8 @@ export class SearchMapComponent extends Component {
           onListingClicked={this.onListingClicked}
           onListingInfoCardClicked={this.onListingInfoCardClicked}
           onMapLoad={this.onMapLoadHandler}
-          onClick={this.onMapClicked}
           onMapMoveEnd={onMapMoveEnd}
           zoom={zoom}
-          reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
         />
       </ReusableMapContainer>
     ) : (

src/marketplace.css

@@ -119,7 +119,7 @@
   /* ================ LocationAutocompleteInput bottom attribution padding ================ */
 
   /* Google Maps needs 72px bottom padding to accommodate logo, Mapbox doesn't have one */
-  --locationAutocompleteBottomPadding: 8px;
+  --locationAutocompleteBottomPadding: 72px;
 
   /* ================ Clearfix solution ================ */