Repository files navigation

google-map-react is a component written over a small set of theGoogle 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 thisexample(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 addlat andlng props to any child ofGoogleMapReact component.

See it in action at jsbin

importReact,{Component}from'react';importGoogleMapReactfrom'google-map-react';constAnyReactComponent=({ text})=><div>{text}</div>;classSimpleMapextendsComponent{staticdefaultProps={center:{lat:59.95,lng:30.33},zoom:11};render(){return(// Important! Always set the container height explicitly<divstyle={{height:'100vh',width:'100%'}}><GoogleMapReactbootstrapURLKeys={{key:/* YOUR KEY HERE */}}defaultCenter={this.props.center}defaultZoom={this.props.zoom}><AnyReactComponentlat={59.955413}lng={30.337844}text="My Marker"/></GoogleMapReact></div>);}}exportdefaultSimpleMap;

• Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for google-map-react,its a requirement for google-maps in general.

npm:

npm install --save google-map-react

yarn:

yarn add google-map-react

Instead of the default 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 theGoogleMapReact component.

You can access to Google Mapsmap andmaps objects by usingonGoogleApiLoaded, in this case you will need to setyesIWantToUseGoogleMapApiInternals totrue

...consthandleApiLoaded=(map,maps)=>{// use map and maps objects};...<GoogleMapReactbootstrapURLKeys={{key:/* YOUR KEY HERE */}}defaultCenter={this.props.center}defaultZoom={this.props.zoom}yesIWantToUseGoogleMapApiInternalsonGoogleApiLoaded={({ map, maps})=>handleApiLoaded(map,maps)}><AnyReactComponentlat={59.955413}lng={30.337844}text="My Marker"/></GoogleMapReact>

PST: Remember to setyesIWantToUseGoogleMapApiInternals to true.

Example here

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 hereexample, you will still be able to hover on almost every map marker.

• Placing react components on the map:simple (source)

• Custom map options:example (source)

• Hover effects:simple hover (source);distance hover (source)

• GoogleMap events:example (source)

• Example project:main (source);balderdash (same source as main)

• Clustering example using Hooks (new:source,article)clustering-with-hooks

• Clustering example (source)google-map-clustering-example

• How to render thousands of markers (new:source)google-map-thousands-markers

• Examples:ExamplesOld examples

• jsbin examplejsbin example

• webpackbin examples (new)docs with webpackbin examples (In progress)

• local develop example (new)develop example

You can find the documentation here:

• API Reference

• NEW DOCS (In progress)

To get a reloadable env, with map, clone this project and

npm installnpm run start# open browser at localhost:4000

(Really big thanks toApril Arcus for documentation fixes)

(thank youDan Abramov for titles structure)

(great thanks toVladimir Akimov he knows why)

MIT

• Older browsers (http://caniuse.com/#feat=promises) will need a ES6 Promise polyfill in order to work.

We're actively looking for contributors, please send a message to the Owner or any of the Collaborators.