How to add InfoWindow for a Circle

Jupiter0806 commented 5 years ago

I'm trying to show an InfoWindow for a Circle.

Tried something like this

<Circle 
  center={{ lat: LAT, lng: LNG }}
>
  <InfoWindow>some text</InfoWindw>
</Circle>

The circle is shown on the map correctly, but couldn't find the InfoWindow.

If replaced the Circle to Marker, it works fine.

Thank you for your time.

danieladea commented 5 years ago

was this ever resolved?

SergiiNikolayev commented 5 years ago

same question

SergiiNikolayev commented 5 years ago

i resolved this way:

<Marker
      position={{ lat: LAT, lng: LNG }}
      visible={false}
      key={key}
    >
      <InfoWindow
        onPositionChanged={() => console.log('on position changed')}
        onContentChanged={() => console.log('on content changed')}
      >
        <div>
          <span>Name:</span><br/>
          <Circle
            radius={radius}
            center={{ lat: LAT, lng: LNG }}
          />
        </div>
      </InfoWindow>
    </Marker>

Jupiter0806 commented 5 years ago

I did something similar. Created a marker to handle the hover and click events, but invisible, with a circle visible. So for the users, they only see there is a circle with an InfoWindow.

sushil-kumr commented 4 years ago

@Jupiter0806 will you share the sample code with the circle?

JustFly1984 commented 4 years ago

@sushil-kumr The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!

tomchentw / react-google-maps

How to add InfoWindow for a Circle #960