Wrapper component for gmaps
yarn add @anarklab/react-gmaps # or npm install @anarklab/react-gmaps --save
Add the reference to google api
<script src="//maps.google.com/maps/api/js?key=<your api key>"></script>
import React from 'react'
import GMaps from 'react-gmaps'
export default () => (
<GMaps addr="Hell's Kitchen, New York, NY, USA" marker />
)
The basic usage is passing addr
props:
<GMaps addr="Hell's Kitchen, New York, NY, USA" />
Also, you can add marker
as boolean attribute or an string to custom image
<GMaps addr="Hell's Kitchen, New York, NY, USA" marker />
// or
<GMaps addr="Hell's Kitchen, New York, NY, USA" marker="path/to/your/custom/pin.png" />
You can change the default options:
<GMaps addr="Hell's Kitchen, New York, NY, USA" options={...} />
To see more detailed information, please see the Google Documentation
You can see this component working here
The MIT License (MIT). Please see License File for more information.