leonardomso / react-google-static

🌍 A React wrapper for Google Static Maps API.

🌍 React Google Static Maps

A React component wrapper to use the Google Static Maps API. Don't forget that to use this API you must have a billing account and an Static Maps API key.

This library supports custom markers. To use a custom icon, you should provide a url link, for example: https://img.icons8.com/dusk/64/000000/marker.png.

Installation

npm install react-google-static

yarn add react-google-static

Usage

import React from 'react';
import GoogleStaticMap from 'react-google-static';

const App = () => (
  <div>
    <h1>Google Static Maps API</h1>

    <GoogleStaticMap
      apiKey={API_KEY}
      latitude={32.064171}
      longitude={34.7748068}
      style={{ width: 200, height: 200 }}
      size={{ width: 200, height: 200 }}
      zoom={16}
    />
  </div>
);

export default App;

Usage with Custom Icon

import React from 'react';
import GoogleStaticMap from 'react-google-static';

const App = () => (
  <div>
    <h1>Google Static Maps API</h1>

    <GoogleStaticMap
      apiKey={API_KEY}
      latitude={32.064171}
      longitude={34.7748068}
      style={{ width: 200, height: 200 }}
      size={{ width: 200, height: 200 }}
      zoom={16}
      iconUrl="https://img.icons8.com/dusk/64/000000/marker.png"
    />
  </div>
);

export default App;

Props

Name	Type	Required
apiKey	Boolean	true
latitude	string | number	true
longitude	string | number	true
size	Object	true
zoom	number	true
scale	number	false
mapFormat	'png' | 'png32' | 'gif' | 'jpg' | 'jpg-baseline'	false
mapType	'roadmap' | 'satellite' | 'terrain' | 'hybrid'	false
iconUrl	string	false
style	any	false