feat: working autocomplete suggestions places

package-lock.json

@@ -10,25 +10,33 @@
 			"dependencies": {
 				"@material-ui/core": "^4.11.3",
 				"@material-ui/icons": "^4.11.2",
+				"@react-google-maps/api": "^2.1.1",
 				"@testing-library/jest-dom": "^5.11.4",
 				"@testing-library/react": "^11.1.0",
 				"@testing-library/user-event": "^12.1.10",
 				"@types/bootstrap": "^5.0.12",
+				"@types/leaflet": "^1.7.0",
 				"@types/node": "^14.14.37",
 				"@types/react": "^17.0.3",
 				"@types/react-router-dom": "^5.1.7",
 				"axios": "^0.21.1",
 				"bootstrap": "^4.6.0",
 				"dotenv": "^8.2.0",
+				"google-maps-react": "^2.0.6",
 				"jquery": "^3.6.0",
 				"popper.js": "^1.16.1",
 				"react": "^17.0.2",
 				"react-bootstrap": "^1.5.2",
 				"react-dom": "^17.0.2",
+				"react-leaflet": "^3.1.0",
+				"react-places-autocomplete": "^7.3.0",
 				"react-router-dom": "^5.2.0",
 				"react-scripts": "4.0.3",
 				"typescript": "^4.2.4",
 				"web-vitals": "^1.0.1"
+			},
+			"devDependencies": {
+				"@types/react-places-autocomplete": "^7.2.6"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -1285,6 +1293,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/@googlemaps/js-api-loader": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.1.tgz",
+			"integrity": "sha512-2ug4uBu0onRXTAo7Yxkay5N7pdNIz3XpTElMTLdCtEfQDxikbjeR6GS8atVhblX+ubFBNlXvDzz7VtuXv0vMRQ==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			}
+		},
 		"node_modules/@hapi/address": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1882,6 +1898,41 @@
 				"url": "https://opencollective.com/popperjs"
 			}
 		},
+		"node_modules/@react-google-maps/api": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.1.1.tgz",
+			"integrity": "sha512-Z/dcaDDfZD4DFnE1GhdHOIFHZ+VocEt6Ixe82f0f9tL/J0CZBQvfJ3V8RogY9fVraxdKIwnQx75U0O1JVqqBnw==",
+			"dependencies": {
+				"@googlemaps/js-api-loader": "1.11.1",
+				"@react-google-maps/infobox": "2.1.1",
+				"@react-google-maps/marker-clusterer": "2.1.1",
+				"invariant": "2.2.4"
+			},
+			"peerDependencies": {
+				"react": "^16.6.3 || ^17.0.0",
+				"react-dom": "^16.6.3 || ^17.0.0"
+			}
+		},
+		"node_modules/@react-google-maps/infobox": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.1.1.tgz",
+			"integrity": "sha512-x/+Td4Wsw+ziEcLjgQketCphuueLZ4vQLFkLrUBVzsHj4as4at79GsdVwoAdKIkBc5BDYJZw3ZGSr/SnWSObeg=="
+		},
+		"node_modules/@react-google-maps/marker-clusterer": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.1.1.tgz",
+			"integrity": "sha512-LIqf1T2dVXRaf/gqk/7kEDpRvr1aQGlqOv/p5zwZus3qI6/3qK4jxNpc89gQ2WkCMrGwcI/fTQrnI55BZCxsLA=="
+		},
+		"node_modules/@react-leaflet/core": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
+			"integrity": "sha512-QbleYZTMcgujAEyWGki8Lx6cXQqWkNtQlqf5c7NImlIp8bKW66bFpez/6EVatW7+p9WKBOEOVci/9W7WW70EZg==",
+			"peerDependencies": {
+				"leaflet": "^1.7.1",
+				"react": "^17.0.1",
+				"react-dom": "^17.0.1"
+			}
+		},
 		"node_modules/@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -2274,6 +2325,11 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
 			"integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg=="
 		},
+		"node_modules/@types/geojson": {
+			"version": "7946.0.7",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+			"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+		},
 		"node_modules/@types/glob": {
 			"version": "7.1.3",
 			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -2283,6 +2339,12 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/googlemaps": {
+			"version": "3.43.3",
+			"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
+			"integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==",
+			"dev": true
+		},
 		"node_modules/@types/graceful-fs": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -2354,6 +2416,14 @@
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
 			"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
 		},
+		"node_modules/@types/leaflet": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
+			"integrity": "sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==",
+			"dependencies": {
+				"@types/geojson": "*"
+			}
+		},
 		"node_modules/@types/minimatch": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2399,6 +2469,16 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"node_modules/@types/react-places-autocomplete": {
+			"version": "7.2.6",
+			"resolved": "https://registry.npmjs.org/@types/react-places-autocomplete/-/react-places-autocomplete-7.2.6.tgz",
+			"integrity": "sha512-5cjtUHZ6ys4Jfqo3jWXeU3SGeloBNOpRy7Zj6ZOjhnveSBJmCQ8q3nhadUw3uhd8sScssxYsBkwojBXlN3vFww==",
+			"dev": true,
+			"dependencies": {
+				"@types/googlemaps": "*",
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/react-router": {
 			"version": "5.1.13",
 			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -7948,6 +8028,15 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/google-maps-react": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+			"integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
+			"peerDependencies": {
+				"react": "~0.14.8 || ^15.0.0 || ^16.0.0",
+				"react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0"
+			}
+		},
 		"node_modules/graceful-fs": {
 			"version": "4.2.6",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -10371,6 +10460,12 @@
 				"webpack-sources": "^1.1.0"
 			}
 		},
+		"node_modules/leaflet": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+			"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+			"peer": true
+		},
 		"node_modules/leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10484,6 +10579,11 @@
 			"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
 			"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
 		},
+		"node_modules/lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+		},
 		"node_modules/lodash.memoize": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -13839,6 +13939,19 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
 			"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
 		},
+		"node_modules/react-leaflet": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.1.0.tgz",
+			"integrity": "sha512-kdZS8NYbYFPmkQr7zSDR2gkKGFeWvkxqoqcmZEckzHL4d5c85dJ2gbbqhaPDpmWWgaRw9O29uA/77qpKmK4mTQ==",
+			"dependencies": {
+				"@react-leaflet/core": "^1.0.2"
+			},
+			"peerDependencies": {
+				"leaflet": "^1.7.1",
+				"react": "^17.0.1",
+				"react-dom": "^17.0.1"
+			}
+		},
 		"node_modules/react-lifecycles-compat": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -13863,6 +13976,18 @@
 				"react-dom": ">=16.3.0"
 			}
 		},
+		"node_modules/react-places-autocomplete": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-7.3.0.tgz",
+			"integrity": "sha512-86wcHC69JATvWBnIS/yCsBHLtwzOGcnx3Ye94u74yTrz1jLRC/txkVDkf6rvC+Jq3zNe/tAg/W53x0EaH1ZPPw==",
+			"dependencies": {
+				"lodash.debounce": "^4.0.8",
+				"prop-types": "^15.5.8"
+			},
+			"peerDependencies": {
+				"react": ">=0.14.7"
+			}
+		},
 		"node_modules/react-refresh": {
 			"version": "0.8.3",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -20380,6 +20505,14 @@
 				}
 			}
 		},
+		"@googlemaps/js-api-loader": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.11.1.tgz",
+			"integrity": "sha512-2ug4uBu0onRXTAo7Yxkay5N7pdNIz3XpTElMTLdCtEfQDxikbjeR6GS8atVhblX+ubFBNlXvDzz7VtuXv0vMRQ==",
+			"requires": {
+				"fast-deep-equal": "^3.1.3"
+			}
+		},
 		"@hapi/address": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -20880,6 +21013,33 @@
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
 			"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
 		},
+		"@react-google-maps/api": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.1.1.tgz",
+			"integrity": "sha512-Z/dcaDDfZD4DFnE1GhdHOIFHZ+VocEt6Ixe82f0f9tL/J0CZBQvfJ3V8RogY9fVraxdKIwnQx75U0O1JVqqBnw==",
+			"requires": {
+				"@googlemaps/js-api-loader": "1.11.1",
+				"@react-google-maps/infobox": "2.1.1",
+				"@react-google-maps/marker-clusterer": "2.1.1",
+				"invariant": "2.2.4"
+			}
+		},
+		"@react-google-maps/infobox": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.1.1.tgz",
+			"integrity": "sha512-x/+Td4Wsw+ziEcLjgQketCphuueLZ4vQLFkLrUBVzsHj4as4at79GsdVwoAdKIkBc5BDYJZw3ZGSr/SnWSObeg=="
+		},
+		"@react-google-maps/marker-clusterer": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.1.1.tgz",
+			"integrity": "sha512-LIqf1T2dVXRaf/gqk/7kEDpRvr1aQGlqOv/p5zwZus3qI6/3qK4jxNpc89gQ2WkCMrGwcI/fTQrnI55BZCxsLA=="
+		},
+		"@react-leaflet/core": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
+			"integrity": "sha512-QbleYZTMcgujAEyWGki8Lx6cXQqWkNtQlqf5c7NImlIp8bKW66bFpez/6EVatW7+p9WKBOEOVci/9W7WW70EZg==",
+			"requires": {}
+		},
 		"@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -21207,6 +21367,11 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
 			"integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg=="
 		},
+		"@types/geojson": {
+			"version": "7946.0.7",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+			"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+		},
 		"@types/glob": {
 			"version": "7.1.3",
 			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -21216,6 +21381,12 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/googlemaps": {
+			"version": "3.43.3",
+			"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
+			"integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==",
+			"dev": true
+		},
 		"@types/graceful-fs": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -21287,6 +21458,14 @@
 			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
 			"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
 		},
+		"@types/leaflet": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
+			"integrity": "sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==",
+			"requires": {
+				"@types/geojson": "*"
+			}
+		},
 		"@types/minimatch": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -21332,6 +21511,16 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"@types/react-places-autocomplete": {
+			"version": "7.2.6",
+			"resolved": "https://registry.npmjs.org/@types/react-places-autocomplete/-/react-places-autocomplete-7.2.6.tgz",
+			"integrity": "sha512-5cjtUHZ6ys4Jfqo3jWXeU3SGeloBNOpRy7Zj6ZOjhnveSBJmCQ8q3nhadUw3uhd8sScssxYsBkwojBXlN3vFww==",
+			"dev": true,
+			"requires": {
+				"@types/googlemaps": "*",
+				"@types/react": "*"
+			}
+		},
 		"@types/react-router": {
 			"version": "5.1.13",
 			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -26042,6 +26231,12 @@
 				}
 			}
 		},
+		"google-maps-react": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+			"integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
+			"requires": {}
+		},
 		"graceful-fs": {
 			"version": "4.2.6",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -28027,6 +28222,12 @@
 				"webpack-sources": "^1.1.0"
 			}
 		},
+		"leaflet": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+			"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+			"peer": true
+		},
 		"leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -28115,6 +28316,11 @@
 			"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
 			"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
 		},
+		"lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+		},
 		"lodash.memoize": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -30895,6 +31101,14 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
 			"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
 		},
+		"react-leaflet": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.1.0.tgz",
+			"integrity": "sha512-kdZS8NYbYFPmkQr7zSDR2gkKGFeWvkxqoqcmZEckzHL4d5c85dJ2gbbqhaPDpmWWgaRw9O29uA/77qpKmK4mTQ==",
+			"requires": {
+				"@react-leaflet/core": "^1.0.2"
+			}
+		},
 		"react-lifecycles-compat": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -30915,6 +31129,15 @@
 				"warning": "^4.0.3"
 			}
 		},
+		"react-places-autocomplete": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-7.3.0.tgz",
+			"integrity": "sha512-86wcHC69JATvWBnIS/yCsBHLtwzOGcnx3Ye94u74yTrz1jLRC/txkVDkf6rvC+Jq3zNe/tAg/W53x0EaH1ZPPw==",
+			"requires": {
+				"lodash.debounce": "^4.0.8",
+				"prop-types": "^15.5.8"
+			}
+		},
 		"react-refresh": {
 			"version": "0.8.3",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

package.json

@@ -17,12 +17,14 @@
 		"axios": "^0.21.1",
 		"bootstrap": "^4.6.0",
 		"dotenv": "^8.2.0",
+		"google-maps-react": "^2.0.6",
 		"jquery": "^3.6.0",
 		"popper.js": "^1.16.1",
 		"react": "^17.0.2",
 		"react-bootstrap": "^1.5.2",
 		"react-dom": "^17.0.2",
 		"react-leaflet": "^3.1.0",
+		"react-places-autocomplete": "^7.3.0",
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.3",
 		"typescript": "^4.2.4",
@@ -51,5 +53,8 @@
 			"last 1 firefox version",
 			"last 1 safari version"
 		]
+	},
+	"devDependencies": {
+		"@types/react-places-autocomplete": "^7.2.6"
 	}
 }

public/index.html

@@ -27,6 +27,7 @@
 		<title>React App</title>
 	</head>
 	<body>
+		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI&libraries=places"></script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 		<!--

src/api/google.ts

@@ -8,9 +8,9 @@ export async function searchForPlaces(query: string) {
 	url.searchParams.set('input', query);
 	url.searchParams.set('inputtype', 'textquery');
 	url.searchParams.set('fields', 'place_id,name,formatted_address');
-
+	console.log(url.toString());
 	let res = await fetch(url.toString(), { mode: 'no-cors' });
-	let json = await res.json();
+	let json = await res.text();
 
 	return json;
 }

src/components/CreatePool.tsx

@@ -6,7 +6,10 @@ import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { useEffect, useState } from 'react';
 import { searchForPlaces } from '../api/google';
 import { makeAPIPostCall } from '../api/utils';
-
+import PlacesAutocomplete, {
+	geocodeByAddress,
+	getLatLng,
+} from 'react-places-autocomplete';
 const useStyles = makeStyles((theme) => ({
 	root: {
 		maxWidth: 345,
@@ -29,8 +32,20 @@ const CreatePool = () => {
 	const [description, setDescription] = useState('');
 	const classes = useStyles();
 	const [group, setGroup] = useState('');
+	const [address, setAddress] = useState('');
+	const handleChange = (address: string) => {
+		setAddress(address);
+	};
 
+	const handleSelect = (address: string) => {
+		setAddress(address);
+		// geocodeByAddress(address)
+		// 	.then((results) => getLatLng(results[0]))
+		// 	.then((latLng) => console.log('Success', latLng))
+		// 	.catch((error) => console.error('Error', error));
+	};
 	const onClick = () => {
+		console.log(address);
 		makeAPIPostCall('/pools/', {
 			title,
 			description,
@@ -40,6 +55,7 @@ const CreatePool = () => {
 			direction,
 			type,
 			group_id: group,
+			address,
 		});
 	};
 	useEffect(() => {}, []);
@@ -154,7 +170,7 @@ const CreatePool = () => {
 						></input>
 					</div>
 					<div className="form-group">
-						<label className="" htmlFor="location">
+						{/* <label className="" htmlFor="location">
 							Location:
 						</label>
 						<input
@@ -173,7 +189,52 @@ const CreatePool = () => {
 							}}
 						>
 							Search
-						</button>
+						</button> */}
+						<PlacesAutocomplete
+							value={address}
+							onChange={handleChange}
+							onSelect={handleSelect}
+						>
+							{({
+								getInputProps,
+								suggestions,
+								getSuggestionItemProps,
+								loading,
+							}) => (
+								<div>
+									<input
+										name="address"
+										id="address"
+										{...getInputProps({
+											placeholder: 'Search Places ...',
+											className: 'location-search-input',
+										})}
+									/>
+									<div className="autocomplete-dropdown-container">
+										{loading && <div>Loading...</div>}
+										{suggestions.map((suggestion) => {
+											const className = suggestion.active
+												? 'suggestion-item--active'
+												: 'suggestion-item';
+											// inline style for demonstration purpose
+											const style = suggestion.active
+												? { backgroundColor: '#fafafa', cursor: 'pointer' }
+												: { backgroundColor: '#ffffff', cursor: 'pointer' };
+											return (
+												<div
+													{...getSuggestionItemProps(suggestion, {
+														className,
+														style,
+													})}
+												>
+													<span>{suggestion.description}</span>
+												</div>
+											);
+										})}
+									</div>
+								</div>
+							)}
+						</PlacesAutocomplete>
 					</div>
 					<Button
 						variant="contained"