Google Map React

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

  </body>
</html>

CSS

.map-gic {
    height: 500px;
    width: 500px
}
body{
    width: 500px;
    height: 500px;
}

Babel + JSX

import React from 'react';
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

class MyMapComponent extends React.Component {
  state = {
    currentLocation: {
      latitude: -34.397,
      longitude: 150.644
    },
    loading: true,
  }

  componentDidMount () {
    navigator.geolocation.getCurrentPosition(position => {
      const { latitude, longitude } = position.coords;
      
      this.setState({ currentLocation: { latitude, longitude }, loading: false })
    }, () => {
      this.setState({ loading: false })
    })
  }

  render () {
    const { isMarkerShown } = this.props;
    const { loading, currentLocation } = this.state;
    if (loading) {
      return <p>Fetching user location..........</p>
    }
    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: currentLocation.latitude, lng: currentLocation.longitude }}
      >
      {isMarkerShown && <Marker position={{ lat: currentLocation.latitude, lng: currentLocation.longitude }} />}
    </GoogleMap>
    )
  }
}

export default compose(withProps({
  googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyAw1zriz4pPpa2YVpyr9tAhomDohpi2FBg",
  loadingElement: <div style={{ height: `100%` }} />,
  containerElement: <div style={{ height: `400px` }} />,
  mapElement: <div style={{ height: `100%` }} />,
}),withScriptjs,
withGoogleMap)(MyMapComponent);


class App extends Component {
  render() {
    return (
      <div className="App">
        <Map isMarkerShown/>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;