React Plugin for Google map

Usage no npm install needed!

<script type="module">
  import reactGmapPlugin from '';



Google Maps plugin for react


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"/>


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=>{
return  <div className="App" style={{ height: "200px" }}>
        <MapComponent mapRef={mapRef} API="your-api-key" onMapClick={onMapClick}/>


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.


The Examples are provided in the package website


This plugin is provided with MIT License