在react babel组件中使用google地图API

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

npm install react-google-maps

import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class MapComponent extends React.Component {
  render() {
    const GoogleMapComponent = withGoogleMap(() => (
      <GoogleMap
        defaultZoom={12}
        defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
      >
        <Marker position={{ lat: 37.7749, lng: -122.4194 }} />
      </GoogleMap>
    ));

    return (
      <div style={{ width: '100%', height: '400px' }}>
        <GoogleMapComponent
          containerElement={<div style={{ height: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
        />
      </div>
    );
  }
}

ReactDOM.render(<MapComponent />, document.getElementById('root'));