React-retailer-map NPM

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