Add GoogleMaps with hardcoding API Key (cf83a405) · Commits · school / Capstone Design / 02 / Vue Router

package-lock.json

+58 −12

Original line number	Diff line number	Diff line
		@@ -11,7 +11,8 @@
		"axios": "^1.5.1",
		"core-js": "^3.8.3",
		"vue": "^3.2.13",
		"vue-router": "^4.2.5"
		"vue-router": "^4.2.5",
		"vue3-google-map": "^0.18.0"
		},
		"devDependencies": {
		"@babel/core": "^7.12.16",
		@@ -1865,6 +1866,23 @@
		"url": "https://github.com/sponsors/sindresorhus"
		}
		},
		"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.5.0",
		"resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.0.tgz",
		"integrity": "sha512-WpHLCZxP7QmB4Hc5kyODGdTfJPsZiOIbcvbYhcS/VeiRNDVjf6CRQ8ViQjwrG5OySC66rtOdj4RVhUXsd1tNTQ==",
		"dependencies": {
		"fast-deep-equal": "^3.1.3",
		"supercluster": "^8.0.1"
		}
		},
		"node_modules/@hapi/hoek": {
		"version": "9.3.0",
		"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
		@@ -2779,6 +2797,15 @@
		}
		}
		},
		"node_modules/@vue/cli-service/node_modules/dotenv": {
		"version": "10.0.0",
		"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
		"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
		"dev": true,
		"engines": {
		"node": ">=10"
		}
		},
		"node_modules/@vue/cli-shared-utils": {
		"version": "5.0.8",
		"resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-5.0.8.tgz",
		@@ -5195,15 +5222,6 @@
		"tslib": "^2.0.3"
		}
		},
		"node_modules/dotenv": {
		"version": "10.0.0",
		"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
		"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
		"dev": true,
		"engines": {
		"node": ">=10"
		}
		},
		"node_modules/dotenv-expand": {
		"version": "5.1.0",
		"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
		@@ -6103,8 +6121,7 @@
		"node_modules/fast-deep-equal": {
		"version": "3.1.3",
		"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
		"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
		"dev": true
		"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
		},
		"node_modules/fast-glob": {
		"version": "3.3.1",
		@@ -7300,6 +7317,11 @@
		"graceful-fs": "^4.1.6"
		}
		},
		"node_modules/kdbush": {
		"version": "4.0.2",
		"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
		"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
		},
		"node_modules/keyv": {
		"version": "4.5.4",
		"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
		@@ -10335,6 +10357,14 @@
		"postcss": "^8.2.15"
		}
		},
		"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",
		@@ -11114,6 +11144,22 @@
		"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
		"dev": true
		},
		"node_modules/vue3-google-map": {
		"version": "0.18.0",
		"resolved": "https://registry.npmjs.org/vue3-google-map/-/vue3-google-map-0.18.0.tgz",
		"integrity": "sha512-dhDlXK5XxKxH3Mj6n6C7y99M5LRwPDHlgGWgfLkmzVMpwlxBhaSxDhSTaduAFUjeHVusEfYdPxJSSP7yPJr8sg==",
		"dependencies": {
		"@googlemaps/js-api-loader": "^1.16.2",
		"@googlemaps/markerclusterer": "^2.4.0",
		"fast-deep-equal": "^3.1.3"
		},
		"engines": {
		"node": ">=16.11.0"
		},
		"peerDependencies": {
		"vue": "^3"
		}
		},
		"node_modules/watchpack": {
		"version": "2.4.0",
		"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

+2 −1

Original line number	Diff line number	Diff line
		@@ -11,7 +11,8 @@
		"axios": "^1.5.1",
		"core-js": "^3.8.3",
		"vue": "^3.2.13",
		"vue-router": "^4.2.5"
		"vue-router": "^4.2.5",
		"vue3-google-map": "^0.18.0"
		},
		"devDependencies": {
		"@babel/core": "^7.12.16",

src/components/GMap.vue

0 → 100644

+34 −0

Original line number	Diff line number	Diff line
		<template>
		<GoogleMap api-key='AIzaSyDGn4q3xBEYl9Hqvn6Beqjk4yZSVGrL1bE' style="width: 100%; height: 500px" :center="center" :zoom="15">
		<Marker :options="markerOptions" />
		</GoogleMap>
		</template>

		<script>
		import { defineComponent } from "vue";
		import { GoogleMap, Marker } from "vue3-google-map";
		import { useRoute } from 'vue-router';

		// console.log(process.env.VUE_APP_GOOGLE_MAPS_API_KEY)

		// https://github.com/inocan-group/vue3-google-map#marker
		// https://developers.google.com/maps/documentation/javascript/reference/marker?hl=ko#Marker
		export default defineComponent({
		components: { GoogleMap, Marker },

		setup() {

		// Used by Copilot
		const route = useRoute();

		// Default location as Gyeongbokgung Palace
		const lat = route.query.lat ? parseFloat(route.query.lat) : 37.579617;
		const lng = route.query.lng ? parseFloat(route.query.lng) : 126.977041;

		const center = { lat: lat, lng: lng };
		const markerOptions = { position: center, label: "T", title: "TEST TITLE" };

		return { center, markerOptions };
		},
		});
		</script>
		No newline at end of file

src/components/LastEnd.vue

+45 −10

Original line number	Diff line number	Diff line
		<template>
		<div>
		<h1>Last</h1>
		<button>Analyze!</button>
		<button @click="getData">Analyze!</button>
		</div>
		</template>

		<script>
		import axios from 'axios';

		const API_URL = process.env.VUE_APP_BACKEND_URL;
		let RANDOM_TOKEN = 'analyze';

		export default {
		name: 'Last-End',
		methods: {
		getData() {
		axios.get(`${API_URL}/${RANDOM_TOKEN}`,
		{
		responseType: 'json',
		headers: {
		'Content-Type': 'application/json',
		// Fixed CORS error
		'Access-Control-Allow-Origin': '*',
		'Access-Control-Allow-Methods': '*',
		'Access-Control-Allow-Headers': ''
		}
		}
		)
		.then(response => {
		let lat = response.data.latitude;
		let lng = response.data.longitude;
		console.log(lat)
		console.log(lng)

		// Do something with the response data
		window.location.href = `#/result?lat=${lat}&lng=${lng}`;

		})
		.catch(error => {
		console.error(error);
		});
		}
		}
		};
		</script>
		No newline at end of file

src/main.js

+0 −4

Original line number	Diff line number	Diff line
		import { createApp } from 'vue'

		//import { store } from './store';
		import { router } from './router'; // 라우터 추가하고

		import App from './App.vue'

		// Create Vue Instance
		const app = createApp(App);

		//app.use(store);
		app.use(router); // 사용 설정 하기

		app.mount('#app');
		No newline at end of file