How do you search within a Polygon's coordinates on Google Maps?

Question

I have implemented react-google-maps with the <Drawing Manager />.

Not sure how to use the object it returns from onPolylineComplete though. Doesn't seem to be documented either. I want to check some other locations appear in the area - so I can populate markers if they do.

So the Flow is:

A user should draw a line around an area (eg. Finsbury Circus, London.)
This calls fetchNewsUpdateMarkers()
That calls API, of objects, each one has lat and an lng value. 3.5 I map through them, their lat-lng values are converted to google LatLng objects and...
I run containsLocation() and return the true ones to markers array.

So it all hedges on getting an array of polygon area coords from my onPolylineComplete returned obj

Code:

<DrawingManager
  defaultOptions={{
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYLINE,
      ],
    },
  }}
  onPolylineComplete={(obj) => props.fetchNewsUpdateMarkers(obj)};
/>

and then...

fetchNewsUpdateMarkers: (obj) => {
  console.log(obj); // <-- this logs out as below
  let markers = [];
  let searchArea = new google.maps.Polygon({ paths: polygonCoords }); // <--that I hope to get from 'obj' somehow!

  let arrayOfAPIlocations = [
    { lat: 51.518420, lng: -0.088690 },
    { lat: 51.518110, lng: -0.087970 },
    { lat: 51.517601, lng: -0.180250 }
  ];

// ^^ only the *last* obj in this array is West London.
// The others are in the same district of East London.

// So maybe something like:

  arrayOfAPIlocations.map(each => {
    let convertedLatLng = new google.maps.LatLng(each.lat, each.lng);
    if (google.maps.geometry.poly.containsLocation(convertedLatLng, searchArea)) {
      markers.push(each);
    }
    return markers;
  });
}

This is what currently comes out of 'obj' :

[onPolygonComplete](https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManager.polygoncomplete) returns a [Polygon](https://developers.google.com/maps/documentation/javascript/reference/polygon) which has a `getPaths()` method. — MrUpsidown, Feb 20 '19 at 00:50

score 4 · Accepted Answer · answered Feb 21 '19 at 20:11

onOverlayComplete event has the following signature:

onOverlayComplete?(e: google.maps.drawing.OverlayCompleteEvent): void

When the user has finished drawing a polygon, OverlayCompleteEvent.overlay property returns the instance of Polygon object, the following snippet demonstrates how to determine whether the given point lies inside the specified polygon:

handleOverlayComplete(e) {

    const polygon = e.overlay;
    const latLng = new google.maps.LatLng(lat, lng);
    const containsPlace = google.maps.geometry.poly.containsLocation(
        latLng,
        polygon
    );
    //...
}

Alternatively onPolygonComplete event could be utilized:

onPolygonComplete?(p: google.maps.Polygon): void

This demo demonstrates how to highlight a marker if it contains within a drawn polygon

How do you search within a Polygon's coordinates on Google Maps?

1 Answers1