🌍 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 |