Skip to content

leonardomso/react-google-static

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŒ React Google Static Maps

Actions Status LICENSE MIT npm version

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