Fakultas Ilmu Komputer UI

Commit e2ec1751 authored by Muhamad Adhytia Wana Putra Rahmadhan's avatar Muhamad Adhytia Wana Putra Rahmadhan
Browse files

[GREEN] Google maps implementation

parent 2f8d1dce
......@@ -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"
}
......
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>
......
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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment