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