1 files changed, 60 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/MapWidget.js b/front/odiparpack/app/components/Widget/MapWidget.js
new file mode 100644
index 0000000..37204e9
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/MapWidget.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { compose } from 'recompose';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import dummy from 'ba-api/dummyContents';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from 'react-google-maps';
+import { Paper } from '@material-ui/core';
+import IdentityCard from '../CardPaper/IdentityCard';
+import styles from './widget-jss';
+
+const MapWithAMarker = compose(
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    {...props}
+    defaultZoom={8}
+    defaultCenter={{ lat: -34.300, lng: 119.344 }}
+  >
+    <Marker
+      position={{ lat: -34.300, lng: 118.044 }}
+    />
+  </GoogleMap>
+));
+
+class MapWidget extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <Paper className={classes.mapWrap}>
+        <MapWithAMarker
+          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+          loadingElement={<div style={{ height: '100%' }} />}
+          containerElement={<div style={{ height: '400px' }} />}
+          mapElement={<div style={{ height: '100%' }} />}
+        />
+        <div className={classes.address}>
+          <IdentityCard
+            title="Contact and Address"
+            name={dummy.user.name}
+            avatar={dummy.user.avatar}
+            phone="(+8543201213)"
+            address="Town Hall Building no.45 Block C - ABC Street"
+          />
+        </div>
+      </Paper>
+    );
+  }
+}
+
+MapWidget.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MapWidget);