title: Drawing multiple polygons with google-maps-react
body: <p>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</p>
  
  <pre><code>import {
    Map,
    InfoWindow,
    Marker,
    GoogleApiWrapper,
    Polygon
  } from 'google-maps-react';
  import React, { Component } from 'react';
  
  export class MapContainer extends Component {
    renderMarker = loc =&gt; {
      return &lt;Marker key={loc._id} position={loc} /&gt;;
    };
  
    renderPolygon = loc =&gt; {
      console.log(loc);
      return (
        &lt;Polygon
          key={loc._id}
          paths={loc}
          strokeColor='#0000FF'
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor='#0000FF'
          fillOpacity={0.35}
        /&gt;
      );
    };
  
    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 (
        &lt;Map
          google={this.props.google}
          zoom={18}
          initialCenter={coords}
          style={style}
          center={center}
        &gt;
          {markerPositions.map(this.renderMarker)}
          {polygonPositions.map(this.renderPolygon)}
          {/* &lt;Polygon
            paths={paths}
            strokeColor='#0000FF'
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor='#0000FF'
            fillOpacity={0.35}
          /&gt; */}
          {/* &lt;Polygon
            paths={{ paths }}
            strokeColor='#0000FF'
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor='#0000FF'
            fillOpacity={0.35}
          /&gt; */}
        &lt;/Map&gt;
      );
    }
  }
  export default GoogleApiWrapper({
    apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_TEST
  })(MapContainer);
  </code></pre>
  
  <p>Instead of drawing one Polygon, i can receive an array of them and draw them all but so far my map doesnt load.</p>
  
  <p>This is how i got my polygon drawing from the service:</p>
  
  <pre><code>const polygon = this.props.places.places.map(place =&gt; {
        return place.location.coordinates.map(values =&gt;
          values.map(data =&gt; {
            return { lat: data[0], lng: data[1] };
          })
        );
      });
  </code></pre>
  
  <p>And this is what is being returned from the polygon.</p>
  
  <pre><code>console.log(
        'POLYGON',
        JSON.stringify(polygon[0]),
        'MULTIPLOS',
        JSON.stringify(polygon)
      );
  </code></pre>
  
  <pre><code>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}]]]
  </code></pre>
  
  <p>I can draw one Polygon but it would be nice if i could draw multiple polygons from my database. Any help?</p>
  
  <pre><code>
  
  </code></pre>