flex-template-web/docs/google-maps.md

Google Maps

The Flex template for web can use the Google Maps API for showing a map and in searching locations in the search autocompletion. This document describes how to set up the API key for the API requests to work properly.

Note: before making the change to Google Map, you should consider if you are OK with their current pricing. There's a pricing calculator available in their pricing page

Generate a Google Maps API key

Go to the Google Maps JavaScript API V3 Reference, click on the "GET A KEY" button in the top bar, and follow the instructions. You can copy the given key to your application now.

Enable Google Places API Web Service

Follow the instructions in the Getting started section of the Places library documentation to enable using the Google Places API Web Service.

Setup the application to use the API key

The application uses the REACT_APP_GOOGLE_MAPS_API_KEY environment variable for the key value. For local development, you can add the variable in the Gitignored .env file in the project root:

REACT_APP_GOOGLE_MAPS_API_KEY=my-key-here

Setup common locations to reduce typing

The location autocomplete-input in the landing page and the topbar can be configured to have specific locations shown by default when the user focuses on the input and hasn't yet typed in any searches. This reduces the typing required for common searches and also reduces the need to use Google Map Places API that much.

To use default searches, another environment variable needs to be set:

REACT_APP_DEFAULT_SEARCHES_ENABLED=true

The default locations have been described in file: src/default-location-searches.js.

The same environment variable also shows "current location" suggestion, which will make the browser to ask user's current location. This is a fast way to search listings nearby. You can specify whether to use the current location from config.js. Search for variables: suggestCurrentLocation and currentLocationBoundsDistance.

Change components: use Google Map versions instead of Mapbox

1. Include Google Map script instead of Mapbox scripts

Mapbox related scripts can be removed from index.html and instead use Google Map script described in comments.

public/index.html:

    <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>
    -->

2. Searching with Google's geocoding API

Location search aka LocationAutocompleteInput should use Google Map specific geocoder. The correct import is written to the comments of LocationAutocompleteInput component.

src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js:

import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderMapbox';
// import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderGoogleMaps';

Furthermore, Google Map states in their terms of service that Google logo needs to be visible when using their geocoding service. It is available as a background image below the autocomplete predictions. However, there needs to be enough padding for that logo. You can change the padding through marketplace.css.

src/marketplace.css:

/* Google Maps needs 72px bottom padding to accommodate logo, Mapbox doesn't have one */
--locationAutocompleteBottomPadding: 8px;

3. Show correct map on ListingPage (Map component)

Google Map version (containing both static and dynamic maps) can be taken into use by importing correct map subcomponent.

src/components/Map/Map.js:

import { StaticMap, DynamicMap, isMapsLibLoaded } from './MapboxMap';
// import { StaticMap, DynamicMap, isMapsLibLoaded } from './GoogleMap';

4. SearchMap.js

The most complex change is happening in SearchPage. First, you need to import SearchMapWithMapbox instead of SearchMapWithGoogleMap.

src/components/SearchMap/SearchMap.js:

Remove this:

import SearchMapWithMapbox, {
  LABEL_HANDLE,
  INFO_CARD_HANDLE,
  getMapBounds,
  getMapCenter,
  fitMapToBounds,
  isMapsLibLoaded,
} from './SearchMapWithMapbox';

And add this instead:

import SearchMapWithGoogleMap, {
  LABEL_HANDLE,
  INFO_CARD_HANDLE,
  getMapBounds,
  getMapCenter,
  fitMapToBounds,
  isMapsLibLoaded,
} from './SearchMapWithGoogleMap';

Then, in render method, you need to put SearchMapWithGoogleMap component into use by replacing SearchMapWithMapbox which is defined inside ReusableMapContainer. The component with correct props is already there in the comments:

// Using Google Maps as map provider should use following component
// instead of SearchMapWithMapbox:
//
// <SearchMapWithGoogleMap
//   containerElement={
//     <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
//   }
//   mapElement={<div className={mapRootClassName || css.mapRoot} />}
//   bounds={bounds}
//   center={center}
//   location={location}
//   infoCardOpen={infoCardOpen}
//   listings={listings}
//   activeListingId={activeListingId}
//   mapComponentRefreshToken={this.state.mapReattachmentCount}
//   createURLToListing={this.createURLToListing}
//   onListingClicked={this.onListingClicked}
//   onListingInfoCardClicked={this.onListingInfoCardClicked}
//   onMapLoad={this.onMapLoadHandler}
//   onMapMoveEnd={onMapMoveEnd}
//   zoom={zoom}
// />

The only extra step is to make mapRootClassName property available from this.props at the beginning of the render method.