react-retailer-map

a react google maps component used to display retailers.

Installation

npm

npm install --save react-retailer-map

yarn

yarn add react-retailer-map

Key Features

• Automatic clustering of retailer markers
• Usage of geolocation to find nearest retailer
• Search field that allows for an address lookup and the closest retailer to the given location
• Responsive
• Customized infobox popups
• Somewhat customizable, you can change the map styles using the options prop and you can change the marker colors using the color prop

Usage

import React from "react"
import { render } from "react-dom"
import RetailerMap from "react-retailer-map"
import "react-retailer-map/lib/styles/retailer-map.scss"

const googleMapURL = `https://maps.googleapis.com/maps/api/js?v=3&key=...&language=en&region=BH&libraries=geometry,drawing,places`
const retailers = [
  {
    id: 1,
    location: "Example 1",
    coordinates: {
      lat: 26.178696,
      lng: 50.552151
    }
  },
  {
    id: 2,
    location: "Example 2",
    coordinates: {
      lat: 26.138895,
      lng: 50.610392
    }
  },
]

render(<RetailerMap retailers={retailers} color="#f00" placeholder="Find nearest retailer" countryCode="BH" googleMapURL={googleMapURL} />, document.getElementById('app'))

Props

| Prop | Type | Default Value | Description | |----------------|-----------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | retailers | array | undefined | An array of retailers to display on the map, each item must have a coordinates property contain lat and lng value | | options | object | undefined | Google maps options object passed to react-google-maps wrapper google.maps.MapOptions | | color | string | undefined | The color that will be used as a fill color on the marker svgs (this includes clusters, markers and the geolocation indicator) | | countryCode | string | undefined | The country to set as the initial center of the map (accepts standard ISO-3166 codes) | | placeholder | string | undefined | The placeholder text that will be shown in the searchbox | | geolocate | boolean | false | Determines whether or not the map should intialize with the users current position as the center | | googleMapURL | string | undefined | Your google map url; which should contain your api key and the following libraries -- geometry, drawing & places |

License

MIT