MicheleBertoli / react-gmaps

A Google Maps component for React.js

Home Page:http://react-gmaps.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Polygon

dgana opened this issue · comments

Could you provide an example on how to draw a polygon like this?

screenshot from 2017-06-12 01-47-34

Thanks a lot for the react gmaps it helped me a lot! i just need to know on how to implement polygon in react-gmaps. Thanks!

Hello @dgana, thanks for opening the issue.
The onMapCreated callback gives you the map object, and you can use any functionality of the Google Map SDK.
For example:

handleMapCreated(map) {
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

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

// ...

<Gmaps onMapCreated={this.handleMapCreated} />

I hope this helps.