tomchentw / react-google-maps

React.js Google Maps integration component
https://tomchentw.github.io/react-google-maps/
MIT License
4.62k stars 939 forks source link

change style info window #1049

Closed iamir4g closed 4 years ago

iamir4g commented 4 years ago

I want to change the style of infowindow: creat a CSS file to change.gm-style .gm-style-iw-dand.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 : Screen Shot 1399-03-21 at 11 55 13

here 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 the style of infoWindow

JustFly1984 commented 4 years ago

@iamir4g 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.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ 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!