How to call a function if Current position within Polygon in google-,maps-react?

Question

I am implementing google-maps-react. I need functinality if user current location is in the polygon, I need to enable a button. I searched for containslocation() but didn't get appropriate answer. Here is my code:

import { Map, GoogleApiWrapper, InfoWindow, Marker, Polygon } from 'google-maps-react';
...
...

      <CurrentLocation
        centerAroundCurrentLocation
        google={this.props.google}
      >
          <Polygon
            paths={triangleCoords}
            strokeColor="#0000FF"
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor="#0000FF"
            fillOpacity={0.35} />
          <Marker
            position={{ lat: this.state.currentPosition.lat, lng: this.state.currentPosition.lng }}
            onClick={this.onMarkerClick}
            name={'Current Location'}
            />
            <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
            onClose={this.onClose}
            >
            <div>
                <h4>{this.state.selectedPlace.name}</h4>
            </div>
            </InfoWindow>
        </CurrentLocation>

Answer 1

Hereś how you can implement it using google-maps-react library:

1. You need to have a function everytime the map is ready onReady. This function will fetch the current position.

2. You can use the HTML5 Geolocation feature to get the current location of the user.

3. You need to import the useRef from React so that you can use ref to get your polygon object.

4. Once you have the coordinate of the user and the polygon object, you need to use google.maps.geometry.poly.containsLocation to check if the polygon contains the coordinate.

5. You need to also import useState to manipulate state variables. You will need this as a flag to determine if the coordinate is contained by the polygon or not and will also be used in the condition when showing the button.

6. So to show the button html you then use the state variable we set and check if it is set to true, then a button should be shown.

Here's the code snippet for the working code:

import React, { useRef, useState } from "react";
import { Map, GoogleApiWrapper, Polygon } from "google-maps-react";

function MapContainer(props) {
  const refPoly = useRef(null);
  const style = {
    position: "absolute",
    width: "400px",
    height: "800px"
  };

  const containerStyle = {
    position: "absolute",
    width: "800px",
    height: "400px"
  };

  const [showBtn, setShowBtn] = useState(null);

  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 }
  ];

  const fetchCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        var pos = new google.maps.LatLng(
          position.coords.latitude,
          position.coords.longitude
        );

        console.log(position.coords);
        google.maps.geometry.poly.containsLocation(pos, refPoly.current.polygon)
          ? setShowBtn(true)
          : setShowBtn(false);
      },
      function(error) {
        console.log(error);
      }
    );
  };
  return (
    <div>
      {showBtn === true && (
        <button display="block" type="button">
          Showing Button!
        </button>
      )}
      <div>
        <Map
          className="map"
          style={style}
          containerStyle={containerStyle}
          google={props.google}
          onReady={fetchCurrentPosition}
          initialCenter={{
            lat: 25.774,
            lng: -80.19
          }}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={3}
        >
          <Polygon
            ref={refPoly}
            paths={triangleCoords}
            strokeColor="#0000FF"
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor="#0000FF"
            fillOpacity={0.35}
          />
        </Map>
      </div>
    </div>
  );
}

export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY",
  libraries: ["geometry"]
})(MapContainer);

Note: To show the button, change the path value of your polygon around your area so that the condition will be set to true. Also use your own API key to make the code work properly. Here's the working code.