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 thecolor
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®ion=BH&libraries=geometry,drawing,places`const retailers =id: 1location: "Example 1"coordinates:lat: 26178696lng: 50552151id: 2location: "Example 2"coordinates:lat: 26138895lng: 50610392
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