about infowindow

[wyangwy]

trafficstars

Why doesn't my infowindow show

            <Marker
                name={'YourMarker'}
                position={{lat: this.props.lat, lng: this.props.lng}}
                icon={Images.icon_marker}
                onClick={this.onMarkerClick}
            />
            <InfoWindow
                marker={this.state.activeMarker}
                visible={this.state.showingInfoWindow}>
                <div>
                    <h1>{this.state.selectedPlace.name}</h1>
                </div>
            </InfoWindow>

onMarkerClick=(props, marker, e)=>{ this.setState({ selectedPlace: props, activeMarker: marker, showingInfoWindow: true }); }

[SimantoR]

Can you provide the console output?

[dohahelmy]

Seems there is no problem here. Please provide your whole code.

[vijeeshpnfgs]

<InfoWindow
    marker={this.state.activeMarker}
    visible={this.state.showingInfoWindow}>
    <div>
        <h1>{this.state.selectedPlace.name}</h1>
        <button type="button" onClick={() => console.log('Custom button click!')}>TEST BUTTON</button>
    </div>
</InfoWindow>

The button click is not firing anything...

[tomcanham]

Yeah, I can't get an InfoWindow to show up for love nor money:

const StyledMapContainer = styled.div`
  height: 100vh;
  width: 100%;
`;

const MapsLoading = () => <div>Loading...</div>

const MapContainer = ({ google, center, zoom = 14 }) => {
  const pos = { lat: center.latitude, lng: center.longitude };
  const pos2 = { lat: center.latitude + .1, lng: center.longitude };

  const markers = [<Marker
      name={'Current location'}
      title={'Location'}
      position={pos}
      key="marker-0" />,
    <Marker
      name={'Current location'}
      title={'Location'}
      position={pos2}
      key="marker-1" />,
  ]

   return <StyledMapContainer>
    <Map google={google} zoom={zoom} initialCenter={pos}>
      {markers}

      <InfoWindow marker={markers[1]} visible>
        <div>
          <h1>InfoWindow</h1>
        </div>
      </InfoWindow>
    </Map>
  </StyledMapContainer>
}

const ConnectedMapContainer = GoogleApiWrapper({
  apiKey, 
  LoadingContainer: MapsLoading,
})(MapContainer);

function App() {
  const [coords, setCoords] = useState();

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      pos => setCoords(pos.coords)
    );
  }, []);

  return (coords ? <ConnectedMapContainer center={coords} zoom={14}></ConnectedMapContainer> : <div>Loading...</div>);
}

[tomcanham]

Figured it out. Seems like we never actually call openWindow() until the visible prop changes. I think this is a bug (if you mount with visible=true, I think it should show up right away). So you can either make sure to change the prop from false to true after rendering the Map component, or I'll try to get a PR together to just call openWindow() on component mount.

[lukjaki]

@vijeeshpnfgs did You manage to fire the onClick event?

[nikhilag]

@tomcanham Did you get a chance to fix this issue?