This is a JavaScript library to easily implement a Google Maps map into your React application. It comes with a collection of React hooks to access the Google Maps map instance all over your components and to use some of the Google Maps Services or Libraries.
- Google Maps React Hooks Library
- Examples
- Basic Google Map
- Google Map with Markers
- Multiple Google Maps
- Directions Service
- Distance Matrix Service
- Elevation Service
- Geocoding Service
- Maximum Zoom Imagery Service
- Places Autocomplete Service
- Places Autocomplete Widget
- Places Service
- Places Service With Element
- Street View Panorama Map
- Street View Panorama With Element
- Development
Clone the repository and run
npm installin the project root to install all dependencies.
To develop the Google Maps React Hooks library, start the project locally with
npm run start:libraryTo develop one of the examples, you have to create a .env file in the /examples directory first and add your Google Maps API key to it in the following format:
GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
An example can be found in /examples/.env.example.
Start the example locally with the appropriate task, e.g. npm run start:map-example. You can find the right task in the README of the example you want to start.
The example runs on localhost:1234.
We are happy about your contribution. Please checkout the following guide to get started: Contribution Guide.
Also, make sure to follow our Coding Conventions when making commits.
A new library version is automatically published by Github Actions as soon as a new version tag is available. To trigger a new release, run:
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git] -w libraryNOTE: Make sure to not forget setting the context to the library workspace with -w library when running the command from project root.