What is @react-google-maps/api?
@react-google-maps/api is a library that provides a set of React components for integrating Google Maps into your React applications. It offers a simple and efficient way to use Google Maps features such as markers, info windows, and various map controls.
What are @react-google-maps/api's main functionalities?
Basic Map
This code demonstrates how to render a basic Google Map using the @react-google-maps/api package. The map is centered at a specific latitude and longitude and has a defined container style.
import { GoogleMap, LoadScript } from '@react-google-maps/api';
const containerStyle = {
width: '400px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function MyComponent() {
return (
<LoadScript googleMapsApiKey="YOUR_API_KEY">
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
>
{ /* Child components, such as markers, info windows, etc. */ }
<></>
</GoogleMap>
</LoadScript>
)
}
export default MyComponent;
Markers
This code demonstrates how to add a marker to the Google Map. The marker is positioned at the center of the map.
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
const containerStyle = {
width: '400px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function MyComponent() {
return (
<LoadScript googleMapsApiKey="YOUR_API_KEY">
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
>
<Marker position={center} />
</GoogleMap>
</LoadScript>
)
}
export default MyComponent;
Info Windows
This code demonstrates how to add an Info Window to a marker on the Google Map. The Info Window appears when the marker is clicked and can be closed by clicking the close button.
import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';
import { useState } from 'react';
const containerStyle = {
width: '400px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function MyComponent() {
const [selected, setSelected] = useState(null);
return (
<LoadScript googleMapsApiKey="YOUR_API_KEY">
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
>
<Marker
position={center}
onClick={() => setSelected(center)}
/>
{selected && (
<InfoWindow
position={center}
onCloseClick={() => setSelected(null)}
>
<div>
<h2>Info Window</h2>
<p>Details about this location.</p>
</div>
</InfoWindow>
)}
</GoogleMap>
</LoadScript>
)
}
export default MyComponent;
Other packages similar to @react-google-maps/api
google-maps-react
google-maps-react is another popular library for integrating Google Maps into React applications. It provides a set of React components similar to @react-google-maps/api but is considered less performant and less actively maintained.
react-google-maps
react-google-maps is an older library for Google Maps integration in React. It offers similar functionalities but is no longer actively maintained, and users are encouraged to migrate to @react-google-maps/api for better performance and support.
react-map-gl
react-map-gl is a library for integrating Mapbox maps into React applications. While it does not use Google Maps, it offers similar functionalities for map rendering, markers, and controls, making it a good alternative for those who prefer Mapbox.
@react-google-maps/api
@react-google-maps/api
This library requires React v16.6 or later. To use the latest features (including hooks) requires React v16.8+. If you need support for earlier versions of React, you should check out react-google-maps
This is complete re-write of the (sadly unmaintained) react-google-maps
library. We thank tomchentw for his great work that made possible.
@react-google-maps/api provides very simple bindings to the google maps api and lets you use it in your app as React components.
Here are the main additions to react-google-maps that were the motivation behind this re-write
Install @react-google-maps/api
with NPM
npm i -S @react-google-maps/api
or Yarn
yarn add @react-google-maps/api
Main features
- Simplified API
- Uses the new Context API
- Supports async React (StrictMode complient)
- Removes lodash dependency =>
smaller bundle size
12.4kb
gzip, tree-shakeable https://bundlephobia.com/result?p=@react-google-maps/api@1.4.0 - forbids loading of Roboto fonts, if you set property preventGoogleFonts on
<LoadScript preventGoogleFonts />
component
Examples
Examples can be found in two places:
- Official docs (powered by react-styleguidist.
- A Gatsby app including some examples. See the examples folder
- Gatsby.js Demo
Advice
Using the examples requires you to generate a google maps api key. For instructions on how to do that please see the following guide
You can join the community at https://spectrum.chat/react-google-maps to ask questions and help others with your experience.
Contribute
Maintainers and contributors are very welcome! See this issue to get started.
Migration from react-google-maps@9.4.5
if you need an access to map object, instead of ref
prop, you need to use onLoad
callback on <GoogleMap />
component.
Before:
<GoogleMap
ref={map => {
const bounds = new window.google.maps.LatLngBounds();
map.fitBounds(bounds);
}}
/>
After:
<GoogleMap
onLoad={map => {
const bounds = new window.google.maps.LatLngBounds();
map.fitBounds(bounds);
}}
onUnmount={map => {
}}
/>
Since 1.2.0 you can use onLoad and onMount props for each @react-google-maps/api component, ref does not contain API methods anymore.
Since version 1.2.2 We added useGoogleMap hook, which is working only with React@16.8.1 and later versions.
Websites made with @react-google-maps-api
DriveFromTo.com Transfer Booking service PWA.
add your website by making PR!