# Google Map React · [![npm version](https://badge.fury.io/js/google-map-react.svg)](http://badge.fury.io/js/google-map-react) [![Build Status](https://travis-ci.org/google-map-react/google-map-react.svg?branch=master)](https://travis-ci.org/google-map-react/google-map-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](github.com/google-map-react/google-map-react/CONTRIBUTING.md) `google-map-react` is a component written over a small set of the [Google Maps API](https://developers.google.com/maps/). 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](http://google-map-react.github.io/google-map-react/map/main) *(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](https://jsbin.com/ruwogapuke/1/edit?js,output) ```javascript 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](https://developers.google.com/maps/documentation/javascript/tutorial). ## 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 `

	Stars	Issues	Version	Updated	Created
google-map-react	6,309	157	2.2.1	a year ago	9 years ago
mapbox-gl	10,767	1,246	3.3.0	a month ago	10 years ago
openlayers			4.6.5	6 years ago	13 years ago
react-leaflet	4,964	64	4.2.1	a year ago	10 years ago
react-map-gl	7,607	83	7.1.7	5 months ago	9 years ago

google-map-react vs mapbox-gl vs openlayers vs react-leaflet vs react-map-gl

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past