gatsby-source-googlemaps-geocoding

gatsby-source-googlemaps-geocoding

This source plugin for Gatsby will make location information from Google Maps available in GraphQL queries.

Installation

# Install the plugin
yarn add gatsby-source-googlemaps-geocoding

In gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-googlemaps-geocoding',
      options: {
        key: 'YOUR_GOOGLE_MAPS_GEOCODING_API_KEY',
        address: 'ADDRESS_YOU_ARE_GEOCODING'
      },
    }
  ]
};

NOTE: To get a Google Maps Geocoding API key, register for a Google Maps dev account.

Configuration Options

The configuration options for this plugin are currently a small subset of the geocoding API parameters. Please review those docs for more details and feel free to contribute to this repo to expand the accepted parameters.

Option	Default	Description
key		[required] Your application's API key. This key identifies your application for purposes of quota management.
address		[required] The street address that you want to geocode, in the format used by the national postal service of the country concerned.

Example Configuration

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-googlemaps-geocoding',
      options: {
        key: process.env.GOOGLE_MAPS_GEOCODING_API_KEY,
        address: `Boston, MA`
      }
    }
  ]
};

Querying Google Maps geocoding information

Once the plugin is configured, one new query is available in GraphQL: allLocationData.

Here’s an example query to load the latitude and longitude for Boston, MA:

query LocationQuery {
  allLocationData {
    edges {
      node {
        results {
          geometry {
            location_type
            location {
              lat
              lng
            }
          }
        }
      }
    }
  }
}

See the Google Maps Geocoding API docs or the GraphiQL UI for info on all returned fields.