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