how to change infoWindow Style in react-google-maps reactjs

Question

I want to change the style of infowindow: creat a CSS file to change .gm-style .gm-style-iw-d and .gm-style .gm-style-iw-c proprty but nothing to chnage , i wnat to change or disable max-width ,over-flow:scroll , padding-right,... like this pic : and i read this link: InfoWindowOptions and write this line for change maxWidth : <InfoWindow options={{maxWidth:300}} onCloseClick={() => togelOpenCloseInfoWindos}> but nothing to change. and this is my code:

 {isOpen &&
                            <InfoWindow options={{ maxWidth: 300 }} style={{ backgroundColor: 'red' }} onCloseClick={() => togelOpenCloseInfoWindos}>
                                <Grid container style={{ paddingLeft: 8, paddingRight: 8, }} xs={12} spacing={0} >
                                    <Grid item xs={7} sm={8} zeroMinWidth>
                                        <Typography noWrap component="p">
                                            <Box fontWeight="bold">
                                                {props.MyProps.locations.NICKNAME}</Box>
                                        </Typography>
                                        {/* <p className={classes.card_title}>{car.NICKNAME}</p> */}
                                    </Grid>
                                    <Grid item xs={5}>{speed_logo(props.MyProps.locations)}</Grid>
                                    <Grid item xs={7} style={{ marginTop: -9 }}><p className={classes.card_time}>{timeToShow(props.MyProps.locations.SENTDATE)}</p></Grid>
                                    <Grid item xs={5} style={{ marginTop: -9 }}>{tempture_logo(props.MyProps.locations)}</Grid>
                                    <Grid xs={12}><Typography component='p' className={classes.card_Address}>{props.MyProps.locations.POSDESCRIPTION}</Typography></Grid> </Grid>
                            </InfoWindow>
                        }

please help me to change style of infoWindow

score 3 · Accepted Answer · answered Jun 15 '20 at 03:46

I'm not sure how to change your InfoWindow via element.style{} in the CSS file however I successfully override these values when I put it inside the .gm-style .gm-style-iw-c {} on the CSS file and appending !important on each line, like the following code:

.gm-style .gm-style-iw-c {
   padding-right: 10px !important;
    padding-bottom: 0px !important;
    max-width: 500px !important;
    max-height: 326px !important;
    min-width: 0px !important;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    top: 0;
    left: 0;
    transform: translate(-50%,-100%);
    background-color: #dd9191;
    border-radius: 8px;
    box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}

Note: This might be what you are looking for, however it is possible that class names will be changed by Google Maps Platform in the future.

As for the maxWidth options in the InfoWindow, I tried using it in my reactjs code without overriding it in my CSS file and it worked properly. Here is how it looks like in my code:

<InfoWindow onCloseClick={this.props.handleCloseCall} options= {{maxWidth : 100 }}>
                 <span>This is InfoWindow message!</span>
             </InfoWindow>

Note: You need to change the YOUR_API_KEY_HERE string with your own API key in the index.js of the code provided for it to work properly.

Hope this helps!

This is prone to failure as these class names, as well as any other class name output by the API are **undocumented**. Do not use this solution. — MrUpsidown, Jun 29 '20 at 08:12

how to change infoWindow Style in react-google-maps reactjs

1 Answers1