I was trying to add an InfoWindow to the mid point of a polyline.

This is my code for displaying the infoWindow.

<InfoWindow
   position={this.state.windowPosition}
   onCloseclick={this.toggleInfoWindow}
   options={{pixelOffset: new google.maps.Size(0,-30)}}
>
       <p>iggd</p>
</InfoWindow>

windowPosition here is the lat and lng of the midpoint of the polyline. When I try to run this I am getting an error saying that You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>. But the owner of the repo said that (link's here) we can render an infoWindow where ever we want if we pass a position as props which I am doing.

Any help is appreciated.

I was trying to add an InfoWindow to the mid point of a polyline.

This is my code for displaying the infoWindow.

<InfoWindow
   position={this.state.windowPosition}
   onCloseclick={this.toggleInfoWindow}
   options={{pixelOffset: new google.maps.Size(0,-30)}}
>
       <p>iggd</p>
</InfoWindow>

windowPosition here is the lat and lng of the midpoint of the polyline. When I try to run this I am getting an error saying that You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>. But the owner of the repo said that (link's here) we can render an infoWindow where ever we want if we pass a position as props which I am doing.

Any help is appreciated.

• javascript
• reactjs
• google-maps
• google-maps-api-3
• react-google-maps

• What value do you get when you console.log(this.state.windowPosition) right before your InfoWindow ponent? – Iavor Commented Feb 10, 2018 at 14:17

1 Answer 1

You could do something like this:

            {this.state.position && 
                 <InfoWindow position={this.state.position}>
                     <h1>My InfoWindow</h1>
                 </InfoWindow>
             }

This topic is discussed here.