google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.
It allows you to create interfaces like this example (You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)
In the simple case you just need to add lat
and lng
props to any child of GoogleMapReact
component.
source-js
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
render() {
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
</div>
);
}
}
export default SimpleMap;
npm:
npm install --save google-map-react
yarn:
yarn add google-map-react
Instead of the ugly Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.
It renders on the server. (Welcome search engines) (you can disable javascript in browser dev tools, and reload any example page to see how it works)
It renders components on the map before (and even without) the Google Maps API loaded.
There is no need to place a <script src=
tag at top of page. The Google Maps API loads upon the first usage of the GoogleMapReact
component.
You can access to Google Maps map
and maps
objects by using onGoogleApiLoaded
, in this case you will need to set yesIWantToUseGoogleMapApiInternals
to true
source-js
...
const handleApiLoaded = (map, maps) => {
// use map and maps objects
};
...
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
PST: Remember to set yesIWantToUseGoogleMapApiInternals
to true.
Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker.
Hover effects: simple hover (source); distance hover (source)
Example project: main (source); balderdash (same source as main)
Clustering example (new: source) google-map-clustering-example
How to render thousands of markers (new: source) google-map-thousands-markers
Examples: Examples Old examples
jsbin example jsbin example
webpackbin examples (new) docs with webpackbin examples (In progress)
local develop example (new) develop example
To get a reloadable env, with map, clone this project and
source-shell
npm install
npm run start
# open browser at localhost:4000
Live Demo: http://google-map-react.github.io/google-map-react/map/main/
Download Link: https://github.com/google-map-react/google-map-react/archive/master.zip
Official Website: https://github.com/google-map-react/google-map-react
#reactjs #javascript