React-google-maps: Example Polygon, Polyline

[DiegoGallegos4]

Hi is there any example on how to use Polygon or Polyline. This is, create a polygon or show a polygon from latLng array, events and some basic example.

I started using the last version today.

Cheers.

[dylantf]

The Polygon and Polyline components are just wrappers around the google maps classes, you can use them in pretty much the same way as you would use other components in this library. For example properties such as setX are just a prop x.

const coords = [
  { lat: 0, lng: 0 },
  { lat: 1, lng: 1 },
  { lat: 2, lng: 2 }
];

<Polygon path={coords} onClick={event => someEventHandler(event)} />

[kylebakerio]

Hey, @dyyylan, I'm trying to make a Polygon as you've shown here, and I don't seem to be having luck...

I've got markers working, and copying the same pattern, I'm trying to do this alongside them:

    {props.zipcodes.map(zipcode => (
      <Polygon
        path={zipcodeDictionary[zipcode]}
        onRightClick={() => console.log("you clicked " + zipcode)}
        key={Date.now() + Math.random()}
      />
      ))}

JSON.stringify on zipcodeDictionary looks like this:

"{
"43451":[
{"lat":-83.674464,"lng":41.331119},{"lat":-83.533773,"lng":41.348933},{"lat":-83.534508,"lng":41.297062},{"lat":-83.645375,"lng":41.268504},{"lat":-83.674464,"lng":41.331119}
],
"97833":[
{"lat":-118.156586,"lng":45.016401},{"lat":-118.176077,"lng":44.979804},{"lat":-118.231962,"lng":44.964778},{"lat":-118.214184,"lng":45.007421},{"lat":-118.156586,"lng":45.016401}
]
}"

Do I need more properties for styling?

[dylantf]

@finetype: It seems like the coordinates are just weird, the first one shows up in the middle of antarctica and the second breaks the map entirely.
https://gist.github.com/dyyylan/a81245ec7b88251c317148f3699c58a0

[kylebakerio]

Haha, figured it out shortly thereafter. Thanks. Adding the other
properties from the Bermuda triangle example sealed it. I just simplified
the shape data I was using so much that it became unusable, perhaps?
Anyways, thanks for getting back to me.

On Dec 5, 2016 8:44 AM, "Dylan Foster" [e-mail] wrote:

@finetype https://github.com/finetype: It seems like the coordinates
are just weird, the first one shows up in the middle of antarctica and the
second breaks the map entirely.
https://gist.github.com/dyyylan/a81245ec7b88251c317148f3699c58a0

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tomchentw/react-google-maps/issues/390#issuecomment-264871470,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGGFcFxaH3J2lx7sDDnHGeDjhRGsYRygks5rFCNHgaJpZM4K2HDP
.

[tomchentw]

Please refer to Getting Help section in the README (or #469).