Need help with google-map-react?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

google-map-react
5.5K Stars 748 Forks MIT License 456 Commits 55 Opened issues

Description

Google map library for react that allows rendering components as markers :tada:

Services available

!
?

Need anything else?

Contributors list

Google Map React · npm version Build Status PRs Welcome

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)

The development of this package is sponsored by Atlist. Atlist is a no-code tool for creating custom maps with multiple markers.

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

import React from "react";
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) =>

{text}
;

export default function SimpleMap(){ const defaultProps = { center: { lat: 10.99835602, lng: 77.01502627 }, zoom: 11 };

return ( // Important! Always set the container height explicitly

); }

My map doesn't appear!

  • 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

Works with your Components

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.