How to add custom block on hover over polygon by using the polygon component

[nishankkumar1994]

No description provided.

[RishabhJain96]

Provide a function to onMouseover as provided by the event list.

[nishankkumar1994]

Thanks @RishabhJain96 , Also custom block is not working for markers when i am using it inside MarkerClusterer component, any idea how we can add info window on it. Thanks for the help.

[RishabhJain96]

Could you provide some code?

[nishankkumar1994]

import React from "react"
import { Marker, InfoWindow } from "react-google-maps"
import { default as MarkerClusterer }
from 'google-react/lib/addons/MarkerClusterer';

export default React.createClass({

getInitialState() {
    return { showInfoWindow: false }
},

render() {

    const { marker } = this.props

    return (
        <MarkerClusterer
          averageCenter
          enableRetinaIcons
          gridSize={60}
          minimumClusterSize={1}
          imagePath={hexToRGBValue(MAP_GEO_COLOR_BY_TYPE.lens_item_of_interest)}
        >
            <Marker
                {...marker}
                onClick={(e) => { this.setState({ showInfoWindow: true }) }}
            >
                { this.state.showInfoWindow ?
                    <InfoWindow onCloseclick={(e) => { this.setState({ showInfoWindow: false }) }}>
                        //content
                    </InfoWindow>
                    : null
                }
            </Marker>
        </MarkerClusterer>
    )

}

})

[nishankkumar1994]

@RishabhJain96 : In my code it's not showing info window on click on a clustered marker. any idea how we can do it. Thanks

[nishankkumar1994]

HI @RishabhJain96 and @ALL , i am using code below and it's not working. thanks for the help

<Polygon options={{
                  fillColor: THREAT_LEVELS_LIST_COLOR[this.props.threatLevelIndexSelected],
                  fillOpacity: 0.7,
                  strokeColor: THREAT_LEVELS_LIST_COLOR[this.props.threatLevelIndexSelected],
                  strokeOpacity: 0.7,
                  strokeWeight: 1,
                }}
                onClick={(e) => { console.log('1'); this.setState({ showInfoWindow: true }) }}
                onMouseover={(e) => { console.log('2'); this.setState({ showInfoWindow: true }) }}
                onMouseout={(e) => { console.log('3'); this.setState({ showInfoWindow: false }) }}
                paths={this.getCountryCoordinates('TJ')}
              >
                { this.state.showInfoWindow ?
                    <InfoWindow onCloseclick={(e) => { this.setState({ showInfoWindow: false }) }}>
                        <div>
                          info window data will goes here
                        </div>
                    </InfoWindow>
                    : null
                }
              </Polygon>```

[nishankkumar1994]

Hi @tomchentw I am trying to use InfoWindow component inside the Polygon component, it's not working. Can you please tell me how can i fix this. Thanks

[tomchentw]

@nishankkumar1994 <InfoWindow> expects to have an anchor component when it is placed inside something (which is often a <Marker>). The <Polygon> cannot be served as an anchor by design. However, you can render the <InfoWindow> separately by just giving it props.position.

Also, 6.0.0 is released on npm beta tag now. See the changelog here. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[sujanmah062]

hello

creating an Info Window for polygons, How we can render Info window for polygons. Is this possible?