Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
map-google-react
Advanced tools
Weekly downloads
Readme
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.
Use the package manager yarn to install map-google-react
.
yarn add map-google-react
or using npm
npm install map-google-react
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>
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 |
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 |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
MIT
FAQs
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.
The npm package map-google-react receives a total of 14 weekly downloads. As such, map-google-react popularity was classified as not popular.
We found that map-google-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.