はのエラーを取得：コードで

Question

反応し使用してGoogleマップインフォボックスを構築しながら「グーグルは」が定義されていません。

const MapWithInfo = compose(
 
    withProps({ 
 
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places", 
 
    loadingElement: <div style={{ height: `100%` }} />, 
 

 
    \t containerElement: <div style={{ height: `400px` }} />, 
 
    mapElement: <div style={{ height: `100%` }} />, 
 
    center: {lat: 41.9, lng: -87.624,} 
 
    }), 
 
    withScriptJS 
 
    withGoogleMap 
 
)(props => 
 
    <GoogleMap 
 
    defaultZoom={15} 
 
    defaultCenter={props.center} 
 
    > 
 
    <InfoBox 
 
     defaultPosition={new google.maps.LatLng(props.center.lat, props.center.lng)} 
 
     options={{ closeBoxURL: ``, enableEventPropagation: true }} 
 
    > 
 
     <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}> 
 
     <div style={{ fontSize: `16px`, fontColor: `#08233B` }}> 
 
      Hello from Taipei 
 
     </div> 
 
     </div> 
 
    </InfoBox> 
 
    <Marker 
 
    \t position= {props.center}/> 
 
    </GoogleMap> 
 
);

私は「グーグルのエラーが定義されていません取得しています。 react-google-mapsのドキュメントに示されているように、APIをwithScriptJSで追加していますが、うまくいきません。 私はライン上のエラーを取得しています：

defaultPosition={new google.maps.LatLng(props.center.lat, props.center.lng)} 

Answer 1

あなたは単にあなたはもうグーグルを呼び出す必要はありません

<InfoBox 
    defaultPosition={props.center} 
    options={{ closeBoxURL: ``, enableEventPropagation: true }} 
> 

を置くことができます。