Better Google Maps + React

Improving the Google Maps Search developer experience.

If you’re reading this you’re probably confused/angry/distraught about the lack of resources on integrating a Google Maps Autocomplete or SearchBox into your React app.

Personally, I had a terrible time writing location-picker components for years- so I finally decided to do something about it. This is a post about my new Google Maps wrapper: https://www.npmjs.com/package/@loadup/react-google-places-autocomplete.

In the past, my go-to library for integrating Google Maps was https://github.com/tomchentw/react-google-maps. Tom Chen did a super awesome job writing this library; however, I always found it a little tedious to require recompose and Higher-Order Components just to render a simple SearchBox. I decided I wanted my wrapper library to take a different approach.

Project Gooooooooooals

• Trivial Configuration: Load Google Maps via the normal <script> tag within our index.html.
• Approachable: Don’t necessitate use of a Higher-Order Component. Make the library declarative, readable, and approachable for even the most junior devs.
• Configurable: Allow the developer to dictate what information they want back from Google. We don’t support every single option in the Autocomplete and SearchBox widgets, but enough to be dangerous.
• Not Dreadful: Normally when using the Google Maps libraries, I find it absolutely painful to parse the address_components array to find the city, state, and zip. We take care of that.
• Cheap: As of the summer of 2018, Google updated the way they price their Maps API calls (making it substantially more expensive). Our library by default integrates the Session Call method, ideally automagically reducing the amount you pay for the service.

Usage

Here’s the most basic uses of our Autocomplete and SearchBox components.

For reference, the Autocomplete component maps to the Autocomplete Widget and is used for finding addresses like “3310 North Riverside Parkway”. Contrarily, the SearchBox component maps to the SearchBox Widget which is used for searching for places like “Pizza in Chicago”.

Installation

yarn add @loadup/react-google-maps-autocomplete

Use the Autocomplete

import React, { Component } from 'react'
import { Autocomplete } from '@loadup/react-google-places-autocomplete'
class AutocompleteExample extends Component {
  render () {
    return (
      <Autocomplete
        fields={[
          'address_components',
          'formatted_address',
          'place_id'
        ]}
        id="example-autocomplete-id"
        onPlaceChanged={({ original, parsed }) => {
          // Do whatever you want
          // original is the Google Maps PlaceResult Object
          // parsed is the parsed version of the address components
        }}
        types={['address']}
      />
    )
  }
}
export default AutocompleteExample

Use the SearchBox

import React, { Component } from 'react'
import { SearchBox } from '@loadup/react-google-places-autocomplete'
class SearchBoxExample extends Component {
  render () {
    return (
      <SearchBox
        id="example-searchbox-id"
        onPlaceChanged={({ original, parsed }) => {
          // Do whatever you want
          // original is an array of Google Maps PlaceResult Object
          // parsed is an array of parsed address components
        }}
      />
    )
  }
}
export default SearchBoxExample

Tada! A declarative, reliable, pain-free way to use Google Maps in your React apps!

This project is sponsored by 🍕 and LoadUp Technologies.