[GREEN] Google maps implementation

e2ec1751 · Muhamad Adhytia Wana Putra Rahmadhan · 2f8d1dce · e2ec1751 · e2ec1751 · e2ec1751
Commit e2ec1751 authored Apr 24, 2021 by Muhamad Adhytia Wana Putra Rahmadhan
--- a/package-lock.json
+++ b/package-lock.json
@@ -4089,6 +4089,11 @@
      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
    },
+    "can-use-dom": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
+      "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
+    },
    "caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4133,6 +4138,11 @@
        "supports-color": "^5.3.0"
      }
    },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
    "char-regex": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -5514,6 +5524,24 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
    },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
+          "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
    "end-of-stream": {
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -6651,6 +6679,35 @@
        "bser": "2.1.1"
      }
    },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
    "figgy-pudding": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -7187,6 +7244,11 @@
        "slash": "^3.0.0"
      }
    },
+    "google-maps-infobox": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz",
+      "integrity": "sha512-hTuWmWZZSOxf5D/z7l3/hTF1grgRvLG53BEKMdjiKOG+FcK/kH7vqseUeyIU9Zj2ZIqKTOaro0nknxpAuRq4Vw=="
+    },
    "graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -8220,6 +8282,15 @@
      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
    },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
    "isstream": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -10239,6 +10310,16 @@
        "object-visit": "^1.0.0"
      }
    },
+    "marker-clusterer-plus": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
+      "integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc="
+    },
+    "markerwithlabel": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/markerwithlabel/-/markerwithlabel-2.0.2.tgz",
+      "integrity": "sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg=="
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10658,6 +10739,15 @@
        }
      }
    },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
    "node-forge": {
      "version": "0.10.0",
      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -12980,6 +13070,22 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-geocode": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/react-geocode/-/react-geocode-0.2.3.tgz",
+      "integrity": "sha512-sIpbgmn1IUzAxO4haOZ6jeeFnMD8ya9PC38yiNrmJ9vPWbvAO2D/2yfCBzZjGZVUm4PRzKAc0KghXfaEnug0TQ==",
+      "requires": {
+        "regenerator-runtime": "^0.13.3"
+      }
+    },
+    "react-google-autocomplete": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-google-autocomplete/-/react-google-autocomplete-2.0.2.tgz",
+      "integrity": "sha512-lDn/FINKB3y4/w61oIqyz4tYeXIxpeGWwseWqm+gLuwOoZ2Fk2IM40Tv5kNTRYfUeAHWByJ4l4ica1HF60TvAg==",
+      "requires": {
+        "prop-types": "^15.5.0"
+      }
+    },
    "react-google-flight-datepicker": {
      "version": "0.1.17",
      "resolved": "https://registry.npmjs.org/react-google-flight-datepicker/-/react-google-flight-datepicker-0.1.17.tgz",
@@ -12991,6 +13097,34 @@
        "react-window": "^1.8.5"
      }
    },
+    "react-google-maps": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/react-google-maps/-/react-google-maps-9.4.5.tgz",
+      "integrity": "sha512-8z5nX9DxIcBCXuEiurmRT1VXVwnzx0C6+3Es6lxB2/OyY2SLax2/LcDu6Aldxnl3HegefTL7NJzGeaKAJ61pOA==",
+      "requires": {
+        "babel-runtime": "^6.11.6",
+        "can-use-dom": "^0.1.0",
+        "google-maps-infobox": "^2.0.0",
+        "invariant": "^2.2.1",
+        "lodash": "^4.16.2",
+        "marker-clusterer-plus": "^2.1.4",
+        "markerwithlabel": "^2.0.1",
+        "prop-types": "^15.5.8",
+        "recompose": "^0.26.0",
+        "scriptjs": "^2.5.8",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
    "react-is": {
      "version": "17.0.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -13352,6 +13486,24 @@
        "picomatch": "^2.2.1"
      }
    },
+    "recompose": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+      "requires": {
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
    "recursive-readdir": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -14128,6 +14280,11 @@
        "ajv-keywords": "^3.5.2"
      }
    },
+    "scriptjs": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
+      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
+    },
    "select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15546,6 +15703,11 @@
        "is-typedarray": "^1.0.0"
      }
    },
+    "ua-parser-js": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
+    },
    "unbox-primitive": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",
@@ -16399,8 +16561,7 @@
        },
        "ssri": {
          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
-          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+          "resolved": "",
          "requires": {
            "figgy-pudding": "^3.5.1"
          }

--- a/package.json
+++ b/package.json
@@ -21,7 +21,10 @@
    "react-datepicker": "^3.8.0",
    "react-dom": "^17.0.1",
    "react-feather": "^2.0.9",
+    "react-geocode": "^0.2.3",
+    "react-google-autocomplete": "^2.0.2",
    "react-google-flight-datepicker": "^0.1.17",
+    "react-google-maps": "^9.4.5",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",

--- a/src/page/DaftarToko/DaftarToko.js
+++ b/src/page/DaftarToko/DaftarToko.js
 import './DaftarToko.css'
+import WalkiddieGoogleMaps from './WalkiddieGoogleMaps.js'
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-google-flight-datepicker/dist/main.css';
 import AlurPendaftaran from './daftar-toko.svg';
@@ -171,6 +172,11 @@ const DaftarToko = () => {
                                            />
                                    </div>
                                </div>
+                                <div>
+                                    <WalkiddieGoogleMaps>
+
+                                    </WalkiddieGoogleMaps>
+                                </div>
                                <br></br>
                                <h3 className="midtext" ><span>Informasi Pengadaan</span></h3>
                                <br></br>

--- a/src/page/DaftarToko/WalkiddieGoogleMaps.js
+++ b/src/page/DaftarToko/WalkiddieGoogleMaps.js
+import React from 'react';
+import { withGoogleMap, GoogleMap, withScriptjs, InfoWindow, Marker } from "react-google-maps";
+import Geocode from "react-geocode";
+import Autocomplete from 'react-google-autocomplete';
+
+Geocode.setApiKey(`${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`)
+
+class WalkiddieGoogleMaps extends React.Component {
+
+    state = {
+        address: '',
+        zoom: 15,
+        height: 400,
+        mapPosition: {
+            lat: -6.364520803098946,
+            lng: 106.82922538589406,
+        },
+        markerPosition: {
+            lat: -6.364520803098946,
+            lng: 106.82922538589406,
+        }
+    }
+
+    componentDidMount() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(position => {
+                this.setState({
+                    mapPosition: {
+                        lat: position.coords.latitude,
+                        lng: position.coords.longitude,
+                    },
+                    markerPosition: {
+                        lat: position.coords.latitude,
+                        lng: position.coords.longitude,
+                    }
+                },
+                    () => {
+                        Geocode.fromLatLng(position.coords.latitude, position.coords.longitude).then(
+                            response => {
+                                const address = response.results[0].formatted_address
+                                this.setState({
+                                    address: (address) ? address : '',
+                                })
+                            },
+                            error => {
+                                console.error(error);
+                            }
+                        );
+
+                    })
+            });
+        } else {
+            console.error("Geolocation is not supported by this browser!");
+        }
+    };
+
+    onChange = (event) => {
+        this.setState({ [event.target.name]: event.target.value });
+    };
+
+    onMarkerDragEnd = (event) => {
+        let newLat = event.latLng.lat(),
+            newLng = event.latLng.lng();
+
+        Geocode.fromLatLng(newLat, newLng).then(
+            response => {
+                const address = response.results[0].formatted_address
+                this.setState({
+                    address: (address) ? address : '',
+                    markerPosition: {
+                        lat: newLat,
+                        lng: newLng
+                    },
+                    mapPosition: {
+                        lat: newLat,
+                        lng: newLng
+                    },
+                })
+            },
+            error => {
+                console.error(error);
+            }
+        );
+    };
+
+    onPlaceSelected = (place) => {
+        const address = place.formatted_address,
+            latValue = place.geometry.location.lat(),
+            lngValue = place.geometry.location.lng();
+
+        this.setState({
+            address: (address) ? address : '',
+            markerPosition: {
+                lat: latValue,
+                lng: lngValue
+            },
+            mapPosition: {
+                lat: latValue,
+                lng: lngValue
+            },
+        })
+    };
+
+    render() {
+        const AsyncMap = withScriptjs(
+            withGoogleMap(
+                props => (
+                    <GoogleMap
+                        defaultZoom={this.state.zoom}
+                        defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
+                    >
+                        <Autocomplete
+                            style={{
+                                width: '100%',
+                                height: '40px',
+                                paddingLeft: '16px',
+                                marginTop: '2px',
+                                marginBottom: '2rem'
+                            }}
+                            placeholder="Cari lokasi"
+                            onPlaceSelected={this.onPlaceSelected}
+                            types={['(regions)']}
+                        />
+
+                        <Marker
+                            google={this.props.google}
+                            name={'Dolores park'}
+                            draggable={true}
+                            onDragEnd={this.onMarkerDragEnd}
+                            position={{ lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng }}
+                        />
+                        <InfoWindow
+                            position={{ lat: (this.state.markerPosition.lat + 0.0018), lng: this.state.markerPosition.lng }}
+                        >
+                            <div>
+                                <span style={{ padding: 0, margin: 0 }}>{this.state.address}</span>
+                            </div>
+                        </InfoWindow>
+                        <Marker />
+                    </GoogleMap>
+                )
+            )
+        );
+
+        return (
+            <div style={{ padding: '1rem', margin: '0 auto 30px auto', maxWidth: 1000 }}>
+                <AsyncMap
+                    googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places`}
+                    loadingElement={
+                        <div style={{ height: `100%` }} />
+                    }
+                    containerElement={
+                        <div style={{ height: this.state.height }} />
+                    }
+                    mapElement={
+                        <div style={{ height: `100%` }} />
+                    }
+                />
+            </div>
+        )
+    }
+
+}
+
+export default WalkiddieGoogleMaps;
\ No newline at end of file