# react-google-map

> React component to render a Google Map with markers

Latest version **3.1.1** (published 2018-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-google-map
pnpm add react-google-map
yarn add react-google-map
bun add react-google-map
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.1 |
| Published | 2018-01-16 |
| First published | 2015-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | Cédric Delpoux |
| Maintainers | xuopled |
| Keywords | react, google, maps, map, markers, googlemaps |

## Links

- npm: https://www.npmjs.com/package/react-google-map
- Repository: https://github.com/xuopled/react-google-map
- Homepage: https://github.com/xuopled/react-google-map#readme
- Issues: https://github.com/xuopled/react-google-map/issues
- npm.io page: https://npm.io/package/react-google-map

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.1 (latest) — 2018-01-16
- 3.1.0 — 2017-09-28
- 3.0.1 — 2016-11-20
- 3.0.0 — 2016-11-20
- 2.0.8 — 2016-11-18
- 2.0.7 — 2016-11-18
- 2.0.6 — 2016-11-18
- 2.0.5 — 2016-11-18
- 2.0.4 — 2016-11-18
- 2.0.3 — 2016-11-18
- 2.0.2 — 2016-11-18
- 2.0.1 — 2016-11-18
- 2.0.0 — 2016-11-18
- 1.0.1 — 2015-09-11
- 1.0.0 — 2015-09-11

## README

# react-google-map ![npm](https://img.shields.io/npm/v/react-google-map.svg) ![license](https://img.shields.io/npm/l/react-google-map.svg)

React component to render a Google Map with markers.
You can use all official Google Maps API features.

https://developers.google.com/maps/documentation/javascript/reference

![react-google-map example](/screenshots/react-google-map-exemple.png)

## Install

```sh
npm install --save react-google-map
```

__If you don't have a solution to load `googleMaps`, you could use this package:__

```sh
npm install --save react-google-maps-loader
```

## Changelog

See [changelog](./CHANGELOG.md)

## Demo

<http://xuopled.github.io/react-google-map/>

## Usage
```css

.map {
  height: 300px;
}

@media screen and (min-width: 1024px){
    .map {
        height: 500px;
    }
}
```

```js
import React, {PropTypes} from "react"

import GoogleMap from "react-google-map"
import GoogleMapLoader from "react-google-maps-loader"

import iconMarker from "./assets/iconMarker.svg"
import iconMarkerHover from "./assets/iconMarkerHover.svg"

import styles from "./index.css"

const MY_API_KEY = "AIzaSyDwsdjfskhdbfjsdjbfksiTgnoriOAoUOgsUqOs10J0" // fake

const Map = ({googleMaps}) => (
  // GoogleMap component has a 100% height style.
  // You have to set the DOM parent height.
  // So you can perfectly handle responsive with differents heights.
  <div className={styles.map}>
    <GoogleMap
      googleMaps={googleMaps}
      // You can add and remove coordinates on the fly.
      // The map will rerender new markers and remove the old ones.
      coordinates={[
        {
          title: "Toulouse",
          position: {
            lat: 43.604363,
            lng: 1.443363,
          },
          onLoaded: (googleMaps, map, marker) => {
            // Set Marker animation
            marker.setAnimation(googleMaps.Animation.BOUNCE)

            // Define Marker InfoWindow
            const infoWindow = new googleMaps.InfoWindow({
              content: `
                <div>
                  <h3>Toulouse<h3>
                  <div>
                    Toulouse is the capital city of the southwestern
                    French department of Haute-Garonne,
                    as well as of the Occitanie region.
                  </div>
                </div>
              `,
            })

            // Open InfoWindow when Marker will be clicked
            googleMaps.event.addListener(marker, "click", () => {
              infoWindow.open(map, marker)
            })

            // Change icon when Marker will be hovered
            googleMaps.event.addListener(marker, "mouseover", () => {
              marker.setIcon(iconMarkerHover)
            })

            googleMaps.event.addListener(marker, "mouseout", () => {
              marker.setIcon(iconMarker)
            })

            // Open InfoWindow directly
            infoWindow.open(map, marker)
          },
        }
      ]}
      center={{lat: 43.604363, lng: 1.443363}}
      zoom={8}
      onLoaded={(googleMaps, map) => {
        map.setMapTypeId(googleMaps.MapTypeId.SATELLITE)
      }}
    />
  </div>
)

Map.propTypes = {
  googleMaps: PropTypes.object.isRequired,
}

export default GoogleMapLoader(Map, {
  libraries: ["places"],
  key: MY_API_KEY,
})

```

## Props
  * `autoFitBounds`: Boolean - Enable it if you will add and remove markers on the fly. Bounds will fit automatically
  * `boundsOffset`: Number - If `autoFitBounds` enabled you want custom bounds, - by default is 0.002
  * `coordinates`: Array of Marker props. You can use all props defined in `google.maps.MarkerOptions` object specification (https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions). If you need some `google.maps` constants, use the `onLoaded` prop (`onLoaded: (googleMaps, map, marker) => {}`) to update your map and markers - by default is []
  * `googleMaps`: Object - injected by placesLoader,
  * `onLoaded`: Function with two parameters (`onLoaded: (googleMaps, map) => {}`),

You can use all props defined in `google.maps.MapOptions` object specification:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions

If you need some `google.maps` constants, use the `onLoaded` prop

## Development

### Clean `lib` folder

```js
npm run clean
```

### Build `lib` folder

```js
npm run build
```

### Watch `src` folder

```js
npm run watch
```

### Lint `src` folder

```js
npm run lint
```

## License

See [MIT](./LICENCE)

---
_Source: https://npm.io/package/react-google-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._