React component to render a Google Map with markers
npm install react-google-mapReact 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
``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
See changelog
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.
// 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:
Toulouse
Toulouse is the capital city of the southwestern
French department of Haute-Garonne,
as well as of the Occitanie region.
,
}) // 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)
}}
/>
)Map.propTypes = {
googleMaps: PropTypes.object.isRequired,
}
export default GoogleMapLoader(Map, {
libraries: ["places"],
key: MY_API_KEY,
})
`Props
* : 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#MapOptionsIf you need some
google.maps constants, use the onLoaded propDevelopment
$3
`js
npm run clean
`$3
js
npm run build
`$3
js
npm run watch
`$3
js
npm run lint
``See MIT