google-map-react é um componente desenvolvido sobre uma pequena parte do Google Maps API. Ele permite a renderização de qualquer componente React no Mapa do Google. É totalmente isomórfico e consegue renderizar no servidor. Além disso, é capaz de renderizar componentes no navegador mesmo que o Google Maps API não esteja carregado. Internamente, ele usa um algoritmo de hover ajustável, permitindo interações de mouse em qualquer objeto no mapa.

Ele te permite criar interfaces como essa do exemplo (Você pode rolar a tabela, aplicar zoom e mover o mapa, passar o mouse sobre os marcadores e clicar neles, e clicar nas linhas da tabela)

Primeiros passoss

No caso mais simples, você só precisa adicionar as props lat e lng em qualquer componente.

Veja funcionando no jsbin

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

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

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  render() {
    return (
      // Importante! Sempre defina a altura do container explicitamente
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: /* SUA CHAVE DA API */ }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

Meu mapa não aparece!

• Certifique-se que o container contenha largura e altura. O mapa vai tentar preencher o componente pai, mas se o container não tiver tamanho definido, o mapa adquire largura/altura igual a 0. Isso não é um requisito do google-map-react, mas sim um requisito do google-maps em si.

Instalação

npm:

npm install --save google-map-react

yarn:

yarn add google-map-react

Recursos

Funciona com seus próprios Componentes

Ao invés de usar os marcadores padrão, balões e outros componentes do Google Maps, você pode renderizar seus prórpios componentes react animados no mapa.

Renderização isomórfica

Ele renderiza no servidor. (Bem vindos, buscadores) Você pode desabilitar o javascript nas ferramentas do desenvolvedor do navegador, e recarregar qualquer página de exemplo para ver como funciona)

Posição dos componentes calculadas independente do Google Maps API

Ele renderiza os componentes no mapa antes de o Google Maps API estar carregado (até mesmo sem ele).

Google Maps API Carrega sob demanda

Não é necessário inserir uma tag <script src= no topo da página. O Google Maps API é carregado a partir da primeira utilização do componente GoogleMapReact.

Use a API do Google Maps

Você pode acessar os objetos mape mapsdo Google Maps usando onGoogleApiLoaded. Nesse caso, é necessário definir a propriedade yesIWantToUseGoogleMapApiInternals para true.

...

const handleApiLoaded = (map, maps) => {
  // usa os objetos map e maps
};

...

<GoogleMapReact
  bootstrapURLKeys={{ key: /* SUA CHAVE DA API */ }}
  defaultCenter={this.props.center}
  defaultZoom={this.props.zoom}
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>
  <AnyReactComponent
    lat={59.955413}
    lng={30.337844}
    text="Meu marcador"
  />
</GoogleMapReact>

OBS: Lembre-se de definir yesIWantToUseGoogleMapApiInternals como true.

Exemplo

Algoritmo de Hover Interno

Agora é possível aplicar hover em todo objeto do mapa. (Contudo, você ainda pode usar seletores hover css se desejar) Se você der zoom no aqui nesse exemplo, ainda conseguirá passar o mouse sobre praticamente todos os marcadores do mapa.

Exemplos

• Inserindo componentes react no mapa: simples (código)

• Opções do mapa personalizadas : exemplo (código)

• Efeitos de Hover: hover simples (código); distance hover (código)

• Eventos do Google Maps: exemplo (código)

• Projeto de exemplo: main (código); balderdash (mesmo código do principal)

• Agrupamento de marcadores (clustering) usando Hooks (novo: código, artigo) clustering-com-hooks

• Exemplos de clustering (código) google-map-clustering-example

• Como renderizar milhares de marcadores (novo: código) google-map-thousands-markers

• Exemplos: Exemplos Exemplos antigos

• Exemplo no jsbin exemplo no jsbin

• Exemplos no webpackbin (novo) documentação com os exemplos (Em construção)

• Exemplo no desenvolvimento local (novo) develop example

Documentação

Você encontra a documentação aqui:

• Referência da API

• Nova Documentação (Em construção)

Contribua

O desenvolvimento local é dividido em duas partes (idealmente, usando duas abas)

Primeiro, execute npm start para observar a pasta src/e recompilar automaticamente a cada mudança.

npm start # runs rollup with watch flag

A segunda parte executará o example/ criado por create-react-app que é linkado à versão local do seu módulo.

# (em outra aba do console)
cd example
npm start # runs create-react-app dev server

Agora, toda vez que você alterar algo no diretório src/ ou na pasta example/src do app de exemplo, create-react-app irá recarregar automaticamente seu servidor de desenvolvimento local e você pode iterar no seu componente em tempo real.

link-install manual

Se você receber o erroModule not found: Can't resolve 'google-react-map'... ao executar o app de exemplo, você precisa linkar seu módulo de desenvolvimento local manualmente. Tente as opções a seguir:

1. Na pasta raiz:

2. Navegue até example/ e (após instalar outras dependências) execute:

npm link google-map-react

Licença

MIT

Problemas conhecidos

• Navegadores antigos precisarão de um polyfill pra suportar as Promises do ES6 para funcionar.

!!! Buscamos colaboradores

Estamos constantemente buscando colaboradores. Por favor, envie uma mensagem ao prorietário ou qualquer outro colaborador.