2

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>
          );
        }
      ))
Chris G
  • 21
  • 2

1 Answers1

7

I guess you mean info window auto pan, if so, this is the default behavior, to disable info window auto-pan on open set disableAutoPan property to true for InfoWindow component like this:

<InfoWindow options={{disableAutoPan: true}}>
    <div>
        content
    </div>
 </InfoWindow>

Here is a demo

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • 1
    Thanks, But i tried that from the docs already, this prevent the map from moving, but page still jumps when i click on icons. This happens off and on depending on the resolutions. – Chris G Aug 12 '19 at 14:31
  • 1
    Thank you so much! Took me days to find this solution – jonask Sep 30 '21 at 09:03