diff --git a/package-lock.json b/package-lock.json
index 2736c2d..63e09fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
"name": "lifeline",
"version": "0.1.0",
"dependencies": {
+ "@react-google-maps/api": "^2.19.2",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "@vis.gl/react-google-maps": "^0.5.0",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -2432,6 +2434,23 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "node_modules/@googlemaps/js-api-loader": {
+ "version": "1.16.2",
+ "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
+ "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==",
+ "dependencies": {
+ "fast-deep-equal": "^3.1.3"
+ }
+ },
+ "node_modules/@googlemaps/markerclusterer": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.3.2.tgz",
+ "integrity": "sha512-zb9OQP8XscZp2Npt1uQUYnGKu1miuq4DPP28JyDuFd6HV17HCEcjV9MtBi4muG/iVRXXvuHW9bRCnHbao9ITfw==",
+ "dependencies": {
+ "fast-deep-equal": "^3.1.3",
+ "supercluster": "^8.0.1"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3417,6 +3436,38 @@
"url": "https://opencollective.com/popperjs"
}
},
+ "node_modules/@react-google-maps/api": {
+ "version": "2.19.2",
+ "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.2.tgz",
+ "integrity": "sha512-Vt57XWzCKfsUjKOmFUl2erVVfOePkPK5OigF/f+q7UuV/Nm9KDDy1PMFBx+wNahEqOd6a32BxfsykEhBnbU9wQ==",
+ "dependencies": {
+ "@googlemaps/js-api-loader": "1.16.2",
+ "@googlemaps/markerclusterer": "2.3.2",
+ "@react-google-maps/infobox": "2.19.2",
+ "@react-google-maps/marker-clusterer": "2.19.2",
+ "@types/google.maps": "3.53.5",
+ "invariant": "2.2.4"
+ },
+ "peerDependencies": {
+ "react": "^16.8 || ^17 || ^18",
+ "react-dom": "^16.8 || ^17 || ^18"
+ }
+ },
+ "node_modules/@react-google-maps/api/node_modules/@types/google.maps": {
+ "version": "3.53.5",
+ "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.53.5.tgz",
+ "integrity": "sha512-HoRq4Te8J6krH7hj+TfdYepqegoKZCj3kkaK5gf+ySFSHLvyqYkDvkrtbcVJXQ6QBphQ0h1TF7p4J6sOh4r/zg=="
+ },
+ "node_modules/@react-google-maps/infobox": {
+ "version": "2.19.2",
+ "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz",
+ "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg=="
+ },
+ "node_modules/@react-google-maps/marker-clusterer": {
+ "version": "2.19.2",
+ "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz",
+ "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw=="
+ },
"node_modules/@remix-run/router": {
"version": "1.14.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
@@ -4195,6 +4246,11 @@
"@types/send": "*"
}
},
+ "node_modules/@types/google.maps": {
+ "version": "3.54.10",
+ "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.10.tgz",
+ "integrity": "sha512-N6gwM01mKhooXaw+IKbUH7wJcIJCn8U60VoaVvom5EiQjmfgevhQ+0+/r17beXW5j8ad2x+WPr0iyOUodCw4/w=="
+ },
"node_modules/@types/graceful-fs": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -4877,6 +4933,18 @@
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
},
+ "node_modules/@vis.gl/react-google-maps": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/@vis.gl/react-google-maps/-/react-google-maps-0.5.0.tgz",
+ "integrity": "sha512-MOC+VLXaBA0Xx8dopYDvUbsdiY3Zu5otnJhy2a84701+po4LywwEtOEmDVQJINrobWdwWAOYoIPkk7gFfaYNTg==",
+ "dependencies": {
+ "@types/google.maps": "^3.54.10"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
"node_modules/@webassemblyjs/ast": {
"version": "1.11.6",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -9555,6 +9623,14 @@
"node": ">= 0.4"
}
},
+ "node_modules/invariant": {
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+ "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dependencies": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"node_modules/ipaddr.js": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -12269,6 +12345,11 @@
"node": ">=4.0"
}
},
+ "node_modules/kdbush": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+ "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+ },
"node_modules/keyboard-key": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
@@ -16596,6 +16677,14 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/supercluster": {
+ "version": "8.0.1",
+ "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+ "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+ "dependencies": {
+ "kdbush": "^4.0.2"
+ }
+ },
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 20d4547..5cfcc33 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@react-google-maps/api": "^2.19.2",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "@vis.gl/react-google-maps": "^0.5.0",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/src/Maps.js b/src/Maps.js
index 13e6096..93233d4 100644
--- a/src/Maps.js
+++ b/src/Maps.js
@@ -1,24 +1,58 @@
-import React from 'react';
-import Map from './GoogleMap';
+import React from 'react'
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+const containerStyle = {
+ width: '400px',
+ height: '400px'
+};
-function Maps() {
- return
-
Maps Page
-
-}
+const center = {
+ lat: -3.745,
+ lng: -38.523
+};
+
+function MyComponent() {
+ const { isLoaded } = useJsApiLoader({
+ id: 'google-map-script',
+ googleMapsApiKey: "AIzaSyDt_et4e5arhJOr4b-DGh3gBJW961RwHnc"
+ })
+
+ const [map, setMap] = React.useState(null)
+
+ const onLoad = React.useCallback(function callback(map) {
+ const bounds = new window.google.maps.LatLngBounds(center);
+ map.fitBounds(bounds);
+
+ setMap(map)
+ }, [])
+
+ const onUnmount = React.useCallback(function callback(map) {
+ setMap(null)
+ }, [])
+ return isLoaded ? (
+
-
}
- mapElement={
}
- />
-