react-google-maps InfoWindow未显示

Question

我点击标记时尝试打开infoWindow。 我一步一步地跟踪文档（https://tomchentw.github.io/react-google-maps/basics/pop-up-window），即使我可以将属性showInfo传递给true，弹出窗口也不会显示...

          import React, {Component} from "react";
          import "./Map.css";
          import _ from "lodash";
          import {withGoogleMap, GoogleMap, Marker, Polyline, InfoWindow} from "react-google-maps";
          import withScriptjs from "react-google-maps/lib/async/withScriptjs";
          import mapStyle from '../assets/map_style.json';

          const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
              <GoogleMap
                  ref={props.onMapLoad}
                  defaultZoom={11}
                  //defaultCenter={{lat: 48.853, lng: 2.35}}
                  defaultCenter={{lat: 33.5731, lng: -7.5898}}
                  defaultOptions={{
                      styles: mapStyle,
                      zoom: 12,
                      minZoom: 12,
                      maxZoom: 18
                  }}
                  onClick={props.onMapClick}
                  onResize={props.onResize}
                  onBoundsChanged={props.onBoundsChanged}
                  onCenterChanged={props.onCenterChanged}
              >
                  {props.markers.map((marker, index) => (
                        <Marker
                        {...marker}
                        key={marker.id}
                        position={marker.position}
                        onClick={() => props.onMarkerClick(marker)}
                        >
                        {}
                        {marker.showInfo && (
                          <InfoWindow onCloseClick={() => props.onMarkerClose(marker)}>
                            <div>hello</div>
                          </InfoWindow>
                        )}
                        </Marker>
                         ))}

                  {props.polylines.map((polyline, index) => (
                      <Polyline
                          {...polyline}
                          key={polyline.id}
                          path={polyline.coords}
                          options={polyline.options}
                          onRightClick={_.noop}
                      />
                  ))}
              </GoogleMap>


          )));

          class Map extends Component {

              constructor(props) {
                  super(props);

                  this.map = null;
                  this.state = {
                      allowedBounds: null,
                      lastValidCenter: null
                  };

                  this.onMapLoad = this.onMapLoad.bind(this);
                  this.onBoundsChanged = this.onBoundsChanged.bind(this);
                  this.onCenterChanged = this.onCenterChanged.bind(this);
              }

              onMapLoad(map) {
                  this.map = map;

                  this.setState({allowedBounds: new window.google.maps.LatLngBounds(
                      new window.google.maps.LatLng(33.5, -7.7),
                      new window.google.maps.LatLng(33.65, -7.45)
                  )});
                  this.setState({lastValidCenter: this.map.getCenter()});
              }

              onBoundsChanged() {
                  this.onBoundsChanged = _.noop;
                  this.props.onMapReady(this.map);
              }

              onCenterChanged() {
                  if (this.state.allowedBounds == null)
                      return;
                  if (this.state.allowedBounds.contains(this.map.getCenter())) {
                      // still within valid bounds, so save the last valid position
                      this.setState({lastValidCenter: this.map.getCenter()});
                      return;
                  }

                  // not valid anymore => return to last valid position
                  this.map.panTo(this.state.lastValidCenter);
              }

           handleMarkerClick(targetMarker) {
            console.log(this.props.markers);
            this.setState({
              markers: this.props.markers.map(marker => {
                if (marker === targetMarker) {
                  marker = {
                    ...marker,
                    showInfo: true,
                  };
                  console.log(marker);
                }
                return marker;
              }),
            });
          }

          handleMarkerClose(targetMarker) {
            this.setState({
              markers: this.props.markers.map(marker => {
                if (marker === targetMarker) {
                  return {
                    ...marker,
                    showInfo: false,
                  };
                }
                return marker;
              }),
            });
          }

          handleMarkerClick = this.handleMarkerClick.bind(this);
          handleMarkerClose = this.handleMarkerClose.bind(this);

              render() {
                  return (
                      <section id="map" className={this.props.className}>
                          <GettingStartedGoogleMap
                              containerElement={
                                  <div style={{height: `100%`}}/>
                              }
                              mapElement={
                                  <div style={{height: `100%`}}/>
                              }
                              loadingElement={
                                  <p>Loading...</p>
                              }
                              googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGNmlXqmPTqSkJpC2DLEIaSL9X6azn2b8&libraries=places,geometry"
                              onMapLoad={this.onMapLoad}
                              onResize={() => console.log("resize")}
                              onMapClick={() => console.log(this.map)}
                              onMarkerClick={this.handleMarkerClick}
                              onMarkerClose={this.handleMarkerClose}
                              markers={this.props.markers}
                              polylines={this.props.polylines}
                              onBoundsChanged={this.onBoundsChanged}
                              onCenterChanged={this.onCenterChanged}
                          />
                      </section>
                  );
              }
          }

          export default Map;

所以标记在我的控制台中返回：

Object {id: "t1_10", position: _.F, showInfo: true, icon: Object}
icon:Object
id:"t1_10"
position:_.F
showInfo:true

提前谢谢！