<h1 align="center"> 🌍 React Google Static Maps </h1>
npm install react-google-static
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.
``
npm install react-google-static
`
yarn add react-google-static
`jsx
import React from 'react';
import GoogleStaticMap from 'react-google-static';
const App = () => (
latitude={32.064171}
longitude={34.7748068}
style={{ width: 200, height: 200 }}
size={{ width: 200, height: 200 }}
zoom={16}
/>
export default App;
`
`jsx
import React from 'react';
import GoogleStaticMap from 'react-google-static';
const App = () => (
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"
/>
export default App;
``
| 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 |