Google Maps Hooks

Google Maps Hooks is a utility library that exposes various React hooks that interact with the official Google Maps API.

Installation

With Yarn:

yarn add google-maps-hooks

With NPM:

npm install --save google-maps-hooks

Getting a Google Maps API Key

See: https://developers.google.com/maps/gmp-get-started#create-project

API Quick Reference

Hooks

• useGeocoding
• useDirections
• useDistanceMatrix
• useGeolocation
• useElevation
• usePlaces
• usePlayableLocations
• useRoads
• useSemanticTile
• useStreetView
• useTimeZone

Components

• GMapsProvider

Usage

1. Firstly, wrap your root component (normally App) with GMapsProvider and pass it your Google Maps API Key.

   import GMapsProvider from "google-maps-hooks";
   
   const App = () => {
    ...
   };
   
   const Root = () => (
    <GMapsProvider apiKey={YOUR_GOOGLE_MAPS_API_KEY}>
     <App />
    </GMapsProvider>
   );
   
   export default Root;

2. And that's it! You can now call any of the available hooks from anywhere in your application.

Example

import React, { useEffect } from "react";
import GMapsProvider, { useGeocoding } from "google-maps-hooks";

const App = () => {
  const geocoding = useGeocoding();

  useEffect(() => {
    geocoding.geocode("My home address").then((res) => console.log(res));
  }, [geocoding]);

  return <p>Example</p>;
};

const Root = () => (
  <GMapsProvider apiKey="AIzaSyAYjk3uc084G9YRkMfSbbfhA0atGZmbh_8">
    <App />
  </GMapsProvider>
);

export default Root;

API Reference (Components)

GMapsProvider

• Props

| Name | Type | Required | Default value | | -------- | ----------- | -------- | ------------- | | apiKey | string | Yes | None | | children | ReactNode | No | None |

API Reference (Hooks)

useGeocoding

• Parameters

None

• Returns

An object containing only one method: geocode.

geocode takes an address (string) as its first argument and returns a Promise that resolves to an object containing the geocoded data.