Google-map-react: Creating Polygons in the map

[SantosOMartinez]

I am currently working in a project where we want to display the google polygons to recreate the climate zones in my island. I chose this library since it allows me to create my custom markers which is amazing but have run in to the problem where i can't seem to find how to create polygons. Other map libraries have that feature but they do not have the ability to make custom component markers. Is there any way to create polygons currently? If there isn't, could it be implemented? I will provide a picture of how my polygons looked using a different library and what I basically want to achieve using this one.

[zeekrey]

You can use the Google Maps API to draw polygons. All you need are these two links:

1. Expose the Google Maps API: https://github.com/google-map-react/google-map-react#use-google-maps-api
2. Use the Google Maps API do draw polygons: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

Here is a small snippet that shows how to do this in detail:

class SimpleMap extends React.Component {
  static defaultProps = {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain"
  };

  render() {
    return (
       <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        yesIWantToUseGoogleMapApiInternals //this is important!
        onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
      >
        <AnyReactComponent 
          lat={59.955413} 
          lng={30.337844} 
          text={'Kreyser Avrora'} 
        />
      </GoogleMapReact>
    );
  }
}

In the handleApiLoaded function you can access the Google API via the mapsvariable and the map itself via the mapvariable. Now you can do this:

const handleApiLoaded = (map, maps) => {
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 }
  ];

   var bermudaTriangle = new maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

[itsmichaeldiego]

@SantosOMartinez That's a great project, thank you for that, and big love to Puerto Rico, I know climate change its hitting hard over there.

I think @zeekrey gave a great answer. If you need any extra help feel free to ask another question, or contact me.

[SantosOMartinez]

Thank you guys. That answer worked really well. I will keep in contact with you @itsmichaeldiego if anything happens. and if you'd like I can contact you when the project is finished so that you can see what I did :)

[itsmichaeldiego]

Sure, please do, we can link it to our README! @SantosOMartinez