UXScripts / google-map-react

isomorphic google map react component, allows render react components on the google map

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)

##Installation

npm install --save google-map-react

##What's it Look Like? In the simple case you just need to add lat lng props to any child of GoogleMap component.
simple example in action

import React, {PropTypes, Component} from 'react/addons';
import shouldPureComponentUpdate from 'react-pure-render/function';

import GoogleMap from 'google-map-react';
import MyGreatPlace from './my_great_place.jsx';

export default class SimpleMapPage extends Component {
  static defaultProps = {
    center: [59.938043, 30.337157],
    zoom: 9,
    greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
  };

  shouldComponentUpdate = shouldPureComponentUpdate;
  
  constructor(props) {
    super(props);
  }

  render() {
    return (
       <GoogleMap
        center={this.props.center}
        zoom={this.props.zoom}>
        <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /* Kreyser Avrora */ />
        <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /* road circle */ />
      </GoogleMap>
    );
  }
}

##Features

###Works with your Components Instead of the ugly Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.

###Isomorphic Rendering 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)

###Component Positions Calculated Independently of Google Maps API It renders components on the map before (and even without) the Google Maps API loaded.

###Google Maps API Loads on Demand 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 GoogleMap component.

###Internal Hover Algorithm 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.

This algorithm allows you to tweak hover probability of map objects, for example making some objects "more hoverable". distance_hover example with different hover probabilities

##Known Issues

• Small icons jingle on Firefox (I don't see this in my older 'GoogleMap' version, so I will find the problem soon)

##Examples (API is really simple, just look at the examples)

• Placing react components on the map
  simple (source)

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

• GoogleMap events
  events (source)

• All api examples
  main (source)
  balderdash (same source as main)

• Example project
  google-map-react-examples

---

(Really big thanks to April Arcus for documentation fixes)
(thank you Dan Abramov for titles structure)
(great thanks to Vladimir Akimov he knows why)