React GMaps

Wrapper component for gmaps

Usage

Install

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>

Usage

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

Demo

You can see this component working here

License

The MIT License (MIT). Please see License File for more information.