Google Map React ·   

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)

Getting started

In the simple case you just need to add lat and lng props to any child of GoogleMapReact component.

See it in action at jsbin

``javascript
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) =>

export default SimpleMap;
`

$3

- 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.

Installation

npm:
`
npm install --save google-map-react
`

yarn:
`
yarn add google-map-react
`

Features

$3

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

$3

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)

$3

It renders components on the map before (and even without) the Google Maps API loaded.

$3

There is no need to place a