google-maps-hooks

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

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

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