DEV Community

Wanderson Alves
Wanderson Alves

Posted on

Como usar o Google Static Map no React Native

E aí, Tudo bem?

Já pensou em usar um mapa estático para mostrar um histórico dos lugares que já visitou? Um exemplo é o Uber, que o usa para mostrar suas corridas mais recentes.

Se eu disser que isso é fácil de fazer, você pode fazer em qualquer aplicativo usando a API do Google. Esta API retorna imagens com base nos parâmetros fornecidos. Veja mais sobre isso

Desenvolvi uma lib para React Native para facilitar esse processo.

Tudo que você precisa e instalar em seu projeto e começar a usar.

yarn react-native-google-static-map-next
Enter fullscreen mode Exit fullscreen mode
import {GoogleStaticMapNext} from 'react-native-google-static-map-next'

function Example() {
  return (
    <GoogleStaticMapNext
      style={styles.staticMap}
      location={{
        latitude: '-33.8688',
        longitude: '151.2195',
      }}
      size={{ width: 400, height: 400 }}
      apiKey="123456789-ABCDFGHIJK
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Por debaixo dos panos está biblioteca é um componente de imagem que usa o url do Google Static Map. Veja mais

Discussion (0)