trulymittal / google-maps-directions-tutorial

Google Maps API integration in React with directions service

Getting Started with Google Maps API with Places autocomplete and Directions service and renderer.

What is covered?

1. Google maps in React
2. Adding Markers
3. Panning and zooming maps
4. Disable default controls
5. Places Autocomplete
6. Directions Service
7. Directions Renderer on map

Youtube tutorial

https://youtu.be/iP3DnhCUIsE

Starting the app

Create an API in the google developers console https://console.developers.google.com, make sure to enable billing for the google project, otherwise you may get a warning as development purposes only.

Add a .env file or .env.local in the project root and specify your API key as REACT_APP_GOOGLE_MAPS_API_KEY=your_api_key_here

In the project directory, you can run:

yarn install
yarn start

OR using npm

npm install
npm start

Author

• Truly Mittal

Contribute

You can fork this repo and send me a PR.