Drawing multiple polygons with google-maps-react

Question

Im trying to change my map container to be able to draw multiple polygons on my map. This was the change that i did to Map

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

export class MapContainer extends Component {
  renderMarker = loc => {
    return <Marker key={loc._id} position={loc} />;
  };

  renderPolygon = loc => {
    console.log(loc);
    return (
      <Polygon
        key={loc._id}
        paths={loc}
        strokeColor='#0000FF'
        strokeOpacity={0.8}
        strokeWeight={2}
        fillColor='#0000FF'
        fillOpacity={0.35}
      />
    );
  };

  render() {
    const coords = this.props.initialCenter;
    const markerPositions = this.props.markerPositions;
    const polygonPositions = this.props.polygonPositions;
    const style = this.props.style;
    const center = this.props.center;
    const paths = this.props.paths;

    console.log(this.props.polygonPositions);
    return (
      <Map
        google={this.props.google}
        zoom={18}
        initialCenter={coords}
        style={style}
        center={center}
      >
        {markerPositions.map(this.renderMarker)}
        {polygonPositions.map(this.renderPolygon)}
        {/* <Polygon
          paths={paths}
          strokeColor='#0000FF'
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor='#0000FF'
          fillOpacity={0.35}
        /> */}
        {/* <Polygon
          paths={{ paths }}
          strokeColor='#0000FF'
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor='#0000FF'
          fillOpacity={0.35}
        /> */}
      </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_TEST
})(MapContainer);

Instead of drawing one Polygon, i can receive an array of them and draw them all but so far my map doesnt load.

This is how i got my polygon drawing from the service:

const polygon = this.props.places.places.map(place => {
      return place.location.coordinates.map(values =>
        values.map(data => {
          return { lat: data[0], lng: data[1] };
        })
      );
    });

And this is what is being returned from the polygon.

console.log(
      'POLYGON',
      JSON.stringify(polygon[0]),
      'MULTIPLOS',
      JSON.stringify(polygon)
    );

POLYGON [[{"lat":41.53113384600326,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.619018495082855}]] 

MULTIPLOS [[[{"lat":41.53113384600326,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.619018495082855}]],[[{"lat":-8.619018495082855,"lng":41.53113384600326},{"lat":-8.61851692199707,"lng":41.53113384600326},{"lat":-8.61851692199707,"lng":41.53129447698251},{"lat":-8.619018495082855,"lng":41.53129447698251},{"lat":-8.619018495082855,"lng":41.53113384600326}]]]

I can draw one Polygon but it would be nice if i could draw multiple polygons from my database. Any help?

Ivo Sturm Ivo Sturm · Accepted Answer · 2020-01-30T07:58:27

You are getting back an array (polygons) of arrays (single polygon coordinate array). So, if you iterate over the 'MULTIPLOS' array you should be able to plot all the polygons in that array of arrays.

Drawing multiple polygons with google-maps-react

1 Answers