ReactJS Google Map并不总是呈现

Question

我一直在开发使用Google Map的React应用。 地图组件并不总是呈现，这非常令人沮丧。我已经在台式机和移动浏览器（Android和IOS）上测试了该应用程序，但地图渲染仍然无法预测。

我正在使用： Google Map React组件（https://github.com/google-map-react/google-map-react）

测试版：

https://fanci-prod.firebaseapp.com

Git Repo：

https://github.com/ericnjanga/fanci-web2/blob/master/src/components__reusable/Map/Map.js

此处是组件：

```

<GoogleMapReact 
bootstrapURLKeys={{key:googleMapAPIkey }} 
defaultCenter={[p.lat, p.lng]}  
defaultZoom={11}> 
      {
        p.listUsersPosts.map((listItem, index) => {

          // Extract basic info
          const item = listItem.user;
          const post = listItem.posts[listItem.posts.length - 1];
          const uData = { ...item };
          const master = { ...p.userProfile };
          let lat = 0;
          let lng = 0;

          // use fake location values for 'dev' environment
          if(appEnv==='dev') {
            if(item.uid!==master.uid) {
              lat = devGeoLocations[index].lat;
              lng = devGeoLocations[index].lng;
            } else {
              lat = devGeoLocations[0].lat;
              lng = devGeoLocations[0].lng;
            } 

          // use real values for 'production' environment
          } else { 
            lat = item.lat;
            lng = item.lng;
          }

          return (
            <MapUser
              key={item.uid}
              item={uData} 
              message={post}
              master={master} 
              lat={lat} 
              lng={lng}
            />
          );
        })
      }

</GoogleMapReact>

```