map-google-react

A highly customizable Google Map component which exposes complete customization options. It uses Google's Places API for Autocomplete options and fetching the details of a location. It also uses the Geococoder API to get the details of a coordinate. SearchBox component is exported which can be used as a child of GoogleMap component to make it customizable and controllable separately.

Installation

Use the package manager yarn to install map-google-react.

yarn add map-google-react

or using npm

npm install map-google-react

Usage

import { GoogleMap, SearchBox } from 'map-google-react';

<GoogleMap
    googleMapUrl={`https://maps.googleapis.com/maps/api/js?key=<MAP_API_KEY>&libraries=places,geocoder`}
>
    <SearchBox />
</GoogleMap>

Props

GoogleMap

| Prop | Type | Default | Description | | :----------: | :-------------: | :-----: | :-----------------------------------: | | googleMapUrl | string | - | Google map url with API key. (libraries needed: places & geocoder) Ex: https://maps.googleapis.com/maps/api/js?key=<MAP_API_KEY>&libraries=places,geocoder | | markerIconUrl | string | https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png | Url for the marker icon. Image located on the url should be of expected size of the marker. | | defaultCenter | { lat: number; lng: number } | { lat: 26.850000, lng: 80.949997 } | Default center for the map when it is loaded | | defaultMarker | { lat: number; lng: number } | - | Default marker to be diplayed on map when it is loaded. This overrides defaultCenter prop. | | defaultZoom | number (0 - 18) | 14 | Default zoom factor for the google map | | mapOptions | google.maps.MapOptions | { mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, fullscreenControl: false, scaleControl: false, zoomControl: true, disableDoubleClickZoom: true, clickableIcons: false } | Fields array accepted by Google maps Places API. This is going to save your cost. :D | | placesOptions | Array | ['geometry', 'formatted_address'] | Fields array accepted by Google maps Places API. This is going to save your cost. :D | | markerOptions | google.maps.ReadonlyMarkerOptions | - | Marker options to customize marker. (Note: markerIconUrl has precedence over the icon prop here) | | infoWindowLoader | JSX.Element | - | Loader to show inside info window till the details are loaded | | infoWindow | string | <div style="display: flex; flex-direction: column; justify-content: center; font-size: 0.918rem; min-height: 28px;"><b>mainText</b>secondaryText</div> | Stringified element for Info Window with mainText and secondaryText in place. These keywords are replaced with actual values. | | beforeChange | () => void | - | Gets called before the change starts. In case you need to disable any confirm button in place till new location is selected. | | onPlacesChange | (coordinates: { [key: string]: number }, callback: (place: string) => void) => void; | - | Receives the coordinates { lat, lng } and then expects user to do callback with the location text separated by hyphen (-). eg: 'Para - Lucknow'. This is helpful when we fetch the location from coordinates on our own server to create a database, and then pass that to callback so next time for a same request we don't need to fetch details from google. This will bypass the Geocoder API and more savings. :D | | afterChange | (data: { lat: number, lng: number, place: string }) => void | - | Gets called once map is finished updating and returns the final lat, lng and the location text | | onError | (error: any) => void | - | Gets called an error is ocurred |

SearchBox

| Prop | Type | Default | Description | | :----------: | :-------------: | :-----: | :-----------------------------------: | | placeholder | string | 'Search location' | Placeholder for the search input | | inputStyles | CSSProperties | - | Custom styles for the input element | | suggestionStyles | CSSProperties | - | Custom styles for a single suggestion in autocomplete | | searchOptions | google.maps.places.AutocompletionRequest | - | Custom options for the AutoComplete API |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT