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