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

Topics 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

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