react-google-map

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

Install

npm install --save react-google-map

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

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

Changelog

See changelog

Demo

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

Usage

.map {
  height: 300px;
}

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

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

npm run clean

Build lib folder

npm run build

Watch src folder

npm run watch

Lint src folder

npm run lint

License

See MIT