Isomorphic component that allows rendering react components on a google map
npm install google-map-reactgoogle-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.
``javascript
import React from "react";
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) =>
export default function SimpleMap(){
const defaultProps = {
center: {
lat: 10.99835602,
lng: 77.01502627
},
zoom: 11
};
return (
// Important! Always set the container height explicitly
$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, it's 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 default 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