google-map-react

What is google-map-react?

google-map-react is a library that allows developers to embed Google Maps into their React applications. It provides a simple and flexible API to work with Google Maps, enabling features like custom markers, overlays, and event handling.

What are google-map-react's main functionalities?

Basic Map Rendering

This code sample demonstrates how to render a basic Google Map using google-map-react. You need to replace 'YOUR_API_KEY' with your actual Google Maps API key.

```jsx
import React from 'react';
import GoogleMapReact from 'google-map-react';

const SimpleMap = () => {
  const defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
      </GoogleMapReact>
    </div>
  );
};

export default SimpleMap;
```

Custom Markers

This code sample shows how to add custom markers to the map. The `AnyReactComponent` is used to render a custom marker at a specified latitude and longitude.

```jsx
import React from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

const CustomMarkerMap = () => {
  const defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
};

export default CustomMarkerMap;
```

Handling Map Events

This code sample demonstrates how to handle map events such as clicks. The `handleApiLoaded` function is used to add an event listener to the map.

```jsx
import React from 'react';
import GoogleMapReact from 'google-map-react';

const EventHandlingMap = () => {
  const defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  const handleApiLoaded = (map, maps) => {
    map.addListener('click', (e) => {
      console.log('Map clicked!', e);
    });
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
      >
      </GoogleMapReact>
    </div>
  );
};

export default EventHandlingMap;
```

Other packages similar to google-map-react

react-google-maps

react-google-maps is another popular library for integrating Google Maps into React applications. It provides a set of React components that wrap the Google Maps JavaScript API, making it easier to work with. Compared to google-map-react, react-google-maps offers a more component-based approach, which can be more intuitive for some developers.

google-maps-react

google-maps-react is a library that provides a set of React components for Google Maps. It is similar to react-google-maps but offers a different API and set of features. It is known for its simplicity and ease of use, making it a good alternative for developers looking for a straightforward solution.

react-map-gl

react-map-gl is a library for integrating Mapbox maps into React applications. While it does not use Google Maps, it offers similar functionalities and is a good alternative for developers looking for a different mapping solution. It provides a set of React components and a flexible API for working with Mapbox maps.

README

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

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

const AnyReactComponent = ({ text }) => <div>{text}</div>;

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

  return (
    // Important! Always set the container height explicitly
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
}

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 <script src= tag at top of page. The Google Maps API loads upon the first usage of the GoogleMapReact component.

Use Google Maps API

You can access to Google Maps map and maps objects by using onGoogleApiLoaded, in this case you will need to set yesIWantToUseGoogleMapApiInternals to true

...

const handleApiLoaded = (map, maps) => {
  // use map and maps objects
};

...

<GoogleMapReact
  bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
  defaultCenter={this.props.center}
  defaultZoom={this.props.zoom}
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>
  <AnyReactComponent
    lat={59.955413}
    lng={30.337844}
    text="My Marker"
  />
</GoogleMapReact>

PST: Remember to set yesIWantToUseGoogleMapApiInternals to true.

Example here

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.

Examples

• Placing react components on the map: simple (source)

• Custom map options: example (source)

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

• GoogleMap events: example (source)

• Example project: main (source); balderdash (same source as main)

• Clustering example using Hooks (new: source, article) clustering-with-hooks

• Clustering example (source) google-map-clustering-example

• How to render thousands of markers (new: source) google-map-thousands-markers

• Examples: Examples Old examples

• jsbin example jsbin example

• webpackbin examples (new) docs with webpackbin examples (In progress)

• local develop example (new) develop example

Documentation

You can find the documentation here:

• API Reference

• NEW DOCS (In progress)

Contribute

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Manual link-install

If you get the error Module not found: Can't resolve 'google-react-map'... while trying to run the example app, you need to manually link your local development module, try the following steps:

1. In the root folder:

npm link

1. Go into example/ and (after installing other dependencies) execute:

npm link google-map-react

License

MIT

Known Issues

• Older browsers (http://caniuse.com/#feat=promises) will need a ES6 Promise polyfill in order to work.

!!! We are looking for contributors

We're actively looking for contributors, please send a message to the Owner or any of the Collaborators.