react-gmap-plugin

Google Maps plugin for react

Features

Maps Javascript API is used to render dynamic Map in association with utility functions to customize the behaviour

Usage with Component

import React from 'react'
import {MapComponent} from 'react-gmap-plugin'

const App=()=>{
const mapRef= React.useRef('') // provide access to the google maps instance anywhere in the component
return  <div className="App" style={{ height: "200px" }}>
        <MapComponent mapRef={mapRef} API="your-api-key"/>
        </div>

}

Usage with Services

import React from 'react'
import {MapComponent,MapServices} from 'react-gmap-plugin'
const {placeMarkerOnClick} = MapServices
const App=()=>{
const mapRef= React.useRef('') // provide access to the google maps instance anywhere in the component
const onMapClick=event=>{
placeMarkerOnClick(mapRef.current,event.latLng)
}
return  <div className="App" style={{ height: "200px" }}>
        <MapComponent mapRef={mapRef} API="your-api-key" onMapClick={onMapClick}/>
        </div>

}

MapComponent Props

|Name | Type | Description |---|---|--- API|String|Required: Your Google Maps API Key. Additionally you can provide libraries or other query params after the key. Eg: API='yourkey&library=places,geometry'. Can also be set globally using env variable REACT_APP_GMAPAPI. One of either is mandatory mapRef|Object|Required: The google maps instance is created on the initial load of map across the application.The instance can be accessed by a component by passign a React ref. This is used when accessing the MapServices functions or while creating your own Services markerList|Array|The list of markers that are shown in the map at a time. For dynamic markers, recommended to keep in a state as array.The lat and lng key determinses the position and markerIcon is the key of custom marker image to be looked up from the markerIcons prop. markerIcon is not mandatory and if not provided uses default marker icon. Eg: markerList={[lat:floatNumber,lng:floatNumber,markerIcons:'string', ...anyOtherKeys]} defaultLocation|Object|The initial centered location when map is rendered. {lat:floatNumber,lng:floatNumber}. Default:{lat: 41.2033, lng: -77.1945} at Pennsylvania. defaultZoom|Number| The default zoom level. Default: 6 disable|Boolean|To disable the map rendering. Default:false. When disable is true, the map is not rendered instead an empty div with className:'map-optional-container' is rendered. Can be used to enable map on click of a button. options|Object|The optional items when rendering the map. Default: {center: {lat: 41.2033,lng: -77.1945}, zoom: 6, streetViewControl: false, mapTypeControl: false } enableLocationSearch|Boolean|A Searchbox is rendered with the map. Default: false. css can be adjusted to bring the required UI using the classNames of the search box onSearch|function| Used is association with enableLocationSearch. The function can be called in association with geocode service or any other custom functionalities onClearSearch|function|Any optional callbacks actions. The input is cleared on clicking clear button on search box by default showDirectionPanel|Boolean| To show directions in a panel after calling the directions service. Used with directionsPanelContainer function. directionsPanelContainer|function|Custom wrapper for the directionPanel. Eg: directionsPanelContainer={(child)=><div className='wrapper'>{child}</div> }.Made in this format to Print directionPanel with additional wrappers markerIcons| Object|The key value pairs of src url or imported image to be used as custom marker icon. defaultMarkerIcon|string/image| Overrides the default marker icon to be used. This can further be overrriden by the markerIcon key in markerList onMapClick|function(event)| Triggered on Clicking anywhere on Map onMarkerClick|function(marker,event,markerDetail)| Triggered on Clicking the Marker Provided in the markerList Array

MapServices Params

Function|Params|Description ----|---|--- placeMarkerOnClick| (mapRef.current <Object>: React ref,latLng <Object>: {lat:<float>,lng:<float>})|Used in association with onMapClick. Used to place a marker at coordinate of click. The markers places cannot be controlled later.Suggest to update a state object containing markers mapFitBounds|(mapRef.current <Object>: React ref,coordinates <Array>:[{lat:<float>,lng:<float>}])|Used to fit the viewport so as to include all the coordinates loadGMaps|(apikey<String>,callback<function>)| Used for dynamic loading of Maps Javascript API. Is already called if you import MapCoponent showInfoWindow|(mapRef.current <Object>: React ref, marker <Object>: marker instance, content <String>, callback <function>)| Used to display info window in association with a marker(like onMarkerClick). Callback function is supplied with the created infowindow instance See examples for usage advancedDirections|(mapRef.current <Object>: React ref, coordinates <Array>:[{lat:<float>,lng:<float>}], callback <function>)| Used to render direction in the map. The coordinates corresponds to the intermediate waypoints. Directions API have limitation of 25 way point. But this limitation is handled by calling batch direction requests and joining them in the map. callback function is supplied with the DirectionRenderer instance. If showDirectionPanel is enabled, this will also give a directions panel after calling this service geocode|(mapRef.current <Object>: React ref, address <String>, callback <function>)| Used to get the geocoded result of an input address. Callback function is supplied with the response placeMarkerAfterGeoCode|(mapRef.current <Object>: React ref, address <String>:address to geocode, callback <function>, elementList <Array>:list of infowindows already present)| Used to convert address to coordiantes and place marker on the coordinate.

Examples

The Examples are provided in the package website

License

This plugin is provided with MIT License