https://github.com/leonardomso/react-google-static

🌍 A React wrapper for Google Static Maps API.
https://github.com/leonardomso/react-google-static

google google-maps google-maps-api google-static-maps google-static-maps-api react static-maps static-maps-api

Last synced: 17 days ago
JSON representation

🌍 A React wrapper for Google Static Maps API.

• Host: GitHub
• URL: https://github.com/leonardomso/react-google-static
• Owner: leonardomso
• License: mit
• Created: 2020-01-14T14:27:33.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-13T08:05:16.000Z (6 months ago)
• Last Synced: 2024-10-14T09:19:35.868Z (30 days ago)
• Topics: google, google-maps, google-maps-api, google-static-maps, google-static-maps-api, react, static-maps, static-maps-api
• Language: TypeScript
• Homepage:
• Size: 1.3 MB
• Stars: 44
• Watchers: 3
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


   🌍 React Google Static Maps



[![Actions Status](https://github.com/leonardomso/react-google-static/workflows/CI/badge.svg)](https://github.com/leonardomso/react-google-static/actions)

[![LICENSE MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/leonardomso/react-google-static)

[![npm version](https://badge.fury.io/js/react-google-static.svg)](https://badge.fury.io/js/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`.

  

## Installation

```

npm install react-google-static

```

```

yarn add react-google-static

```

## Usage

```jsx

import React from 'react';

import GoogleStaticMap from 'react-google-static';

const App = () => (

  


    
Google Static Maps API


    

  

);


export default App;

```

## Usage with Custom Icon

```jsx

import React from 'react';

import GoogleStaticMap from 'react-google-static';

const App = () => (

  


    
Google Static Maps API


    

  

);


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