Examples

You can check the source code on GitHub

Some ready to use code examples are provided below. Feel free to contribute.

Placing a Marker on the Map

Right clicking on the placed marker removes it. Clicking on the marker opens an infowindow showing the coordinates by default. This is a basic example to use the placeMarkerOnClick function. For your scenario, the marker and its click events can be generated by your custom logic by accesing the coordinates from click event.

import React from "react";
import { MapComponent, MapServices } from "react-gmap-plugin";

const MyMap = () => {
  const mapRef = React.useRef("");
  const onMapClick = (event) => {
    MapServices.placeMarkerOnClick(mapRef.current, event.latLng);
  };
  return (
    <div className="App" style=>
      <MapComponent
        mapRef={mapRef}
        API="your-api-key"
        onMapClick={onMapClick}
      />
    </div>
  );
};

Showing a single Location using marker

If there is only one marker in the array, the map automatically centers and zooms to the marker location

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

const MyMap=()=>{
const mapRef= React.useRef('') 
const markerList =[{ lat: 41.2033, lng: -77.1945 }]
return  <div className="App" style=>
        <MapComponent mapRef={mapRef} API="your-api-key" markerList={markerList}  />
        </div>

}

Showing multiple Location using markers

#uses custom markers, shows infowindow on clickin the marker

The default markerIcon is same as the default google map marker. It is not necessary to provide a default marker.

import React from 'react'
import {MapComponent,MapServices} from 'react-gmap-plugin'
const {showInfoWindow}=MapServices;
  const iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/";
  const markerIcons = {       // you can use he markers provided by google Earth as well as use your own images
    parking:  iconBase + "parking_lot_maps.png",
    library: iconBase + "library_maps.png",
    info: iconBase + "info-i_maps.png",
    invalid:'invalid' // an invalid image shows no marker . Providing null, undefined, '', 0 renders default icon
  };
  const markerList =[{ lat: -33.91851096391805, lng: 151.2344058214569,name:'Parking Lot',markerIcon:'parking' },
  { lat: -33.91721, lng: 151.2263,name:'Info',markerIcon:'info' }, { lat: -33.91727341958453, lng: 151.23348314155578,name:'Library',markerIcon:'library' } ]
  // when adding multiple markers, the map fits the entire markers in its viewport

const MyMap=()=>{
const mapRef= React.useRef('') 
  const onMarkerClick = (marker, event, el) => {   // marker- the marker instance , event - the click event, markerDetail= the corresponding markerDetail from markerList
    const content = `<strong>${el.name}</strong>`;
    showInfoWindow(mapRef.current, marker, content, (infowindow)=>console.log(infowindow) );
  };

return  <div className="App" style=>
        <MapComponent
        mapRef={mapRef} 
        API="your-api-key"
        markerList={markerList}
        onMarkerClick={onMarkerClick}
        markerIcons={markerIcons}/>
        </div>

}

Search By Location

Uses GeocodeAPI to find the location of an address. Setting enableLocationSearch to true renders a search box on the map. It can be customised using css

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

const MyMap=()=>{
const mapRef= React.useRef('') 
const [markerList,setMarkerList]= React.useState([])
const onSearchClear=()=>{
  console.log('cleared')
}
const onSearch = event => {
  if (event.key === 'Enter') {
    MapServices.geocode(
      mapRef.current,
      event.target.value,
      res => {
        if (res.status){
         setMarkerList([{Latitude: res.geometry.location.lat, Longitude: res.geometry.location.lng, Location: res?.formatted_address}])
        }
       
      }
    );
  }
};
return  <div className="App" style=>
        <MapComponent
        mapRef={mapRef}
        API="your-api-key"
        markerList={markerList}
        enableLocationSearch
        onSearch={onSearch}
        onSearchClear={onSearchClear}
        />
        </div>

}

Show Directions and print the textual directions

The directions API can be called using the advancedDirections function. This function is different from the usual DirectionsAPI because it overcame the 25 waypoints limitation of the API. Additional waypoints are called as batch and the result is joined as one renderer. This example uses a plugin react-to-print to print the directions panel. This is the scenario addressed by using a seperate directionsPanelContainer wrapper prop. You can modify the styles associated with it to match your requirements

import React from "react";
import { MapComponent, MapServices } from "react-gmap-plugin";
import { useReactToPrint } from "react-to-print";
import "./styles.scss";

const MyMap = () => {
  const mapRef = React.useRef("");
  const directionPanelRef = React.useRef();
  const handlePrint = useReactToPrint({
    content: () => directionPanelRef.current,
    pageStyle: `
@page {
  size: 80mm 50mm;
  margin: 80px 80px;
}

@media all {
  .pagebreak {
    display: none;
  }
}

@media print {
  .pagebreak {
    page-break-before: always;
  }
}
`
  });

  const getDirection = () => {
    MapServices.advancedDirections(mapRef.current, markerList, (renderer) => {
      console.log(renderer);
    });
  };
  const markerList = [
    {
      lat: -33.91851096391805,
      lng: 151.2344058214569,
      name: "Parking Lot",
      markerIcon: "parking"
    },
    { lat: -33.91721, lng: 151.2263, name: "Info", markerIcon: "info" },
    {
      lat: -33.91727341958453,
      lng: 151.23348314155578,
      name: "Library",
      markerIcon: "library"
    }
  ];
  const directionsPanelContainer = (prop) => (
    <div className="directionsPanelContainer" ref={directionPanelRef}>
      <h1>Directions To Destination</h1>
      {prop}
    </div>
  );
  return (
    <>
      <button onClick={getDirection}> Get Direction</button>
      <button
        className="printIcon"
        onClick={handlePrint}
        title="Print Directions"
      >
        Print Direction
      </button>
      <div className="App" style=>
        <MapComponent
          mapRef={mapRef}
          API="your-api-key"
          markerList={markerList}
          showDirectionPanel
          directionsPanelContainer={directionsPanelContainer}
        />
      </div>
    </>
  );
};