When I click on the map icon and open the info window the page jumps to the center of my screen. How can i prevent the page from jumping when i open an info window?
const UserMarker = props => (
<Marker
position={props.location}
icon={props.icon}
onClick={() => props.users.setIsOpen()}
>
{props.users.isOpen && <InfoWindow onCloseClick={() => props.users.setIsOpen()}>
<div>
<h3 className="margin-bottom-1">{props.users.hasDescription ? <img alt={props.users.name} src={props.icon} /> : <i className="fa fa-user" />} {props.users.name}</h3>
{props.users.hasDescription ? <p>{props.users.description}</p> : ''}
<p>{props.users.hasDescription ? '' : `Bid: ${props.users.bidAmount && convertToDollars(props.users.bidAmount)}`}</p>
</div>
</InfoWindow>}
</Marker>
)
export const UserMap = withScriptjs(withGoogleMap((props) => {
const { users, area, zoom } = props;
const markers = users.map((user, idx) => <UserMarker
key={idx}
users={user}
location={{ lat: user.lat, lng: user.lon }}
icon={user.marker}
/>);
return (
<React.Fragment>
<GoogleMap
defaultZoom={zoom}
center={{ lat: area.lat, lng: area.lon }}
>
{markers}
</GoogleMap>
</React.Fragment>
);
}
))