Vue Js find nearest location using latitude and longitude

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">
        <h1>Vue Js Nearest Location Finder</h1>
        <p>Enter your current latitude and longitude:</p>
        <div>
            <label for="latitude">Latitude:</label>
            <input type="text" id="latitude" v-model="latitude">
        </div>
        <div>
            <label for="longitude">Longitude:</label>
            <input type="text" id="longitude" v-model="longitude">
        </div>
        <button @click="findNearestLocation">Find Nearest Location</button>
        <p v-if="nearestLocation">The nearest location is {{ nearestLocation.name }} ({{ nearestDistance }} km away).
        </p>
    </div>

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    latitude: '26.7814955',
                    longitude: '80.9152434',
                    nearestLocation: null,
                    nearestDistance: null,
                    locations: [
                        { name: 'Location A', latitude: 37.7749, longitude: -122.4194 },
                        { name: 'Location B', latitude: 37.7749, longitude: -122.4084 },
                        { name: 'Location C', latitude: 37.7858, longitude: -122.4011 }
                    ]
                };
            },
            methods: {
                findNearestLocation() {
                    const userLocation = {
                        latitude: parseFloat(this.latitude),
                        longitude: parseFloat(this.longitude)
                    };
                    let nearestLocation = null;
                    let nearestDistance = Infinity;
                    for (const location of this.locations) {
                        const distance = this.getDistanceFromLatLonInKm(userLocation.latitude, userLocation.longitude, location.latitude, location.longitude);
                        if (distance < nearestDistance) {
                            nearestLocation = location;
                            nearestDistance = distance;
                        }
                    }
                    this.nearestLocation = nearestLocation;
                    this.nearestDistance = nearestDistance;
                },
                getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
                    const earthRadiusKm = 6371;
                    const dLat = this.deg2rad(lat2 - lat1);
                    const dLon = this.deg2rad(lon2 - lon1);
                    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                        Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
                        Math.sin(dLon / 2) * Math.sin(dLon / 2);
                    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                    const distance = earthRadiusKm * c;
                    return distance;
                },
                deg2rad(deg) {
                    return deg * (Math.PI / 180);
                }
            }
        });
    </script>
    <style scoped>
        #app {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }

h1 {
            font-size: 2.5rem;
            margin-top: 2rem;
        }

p {
            font-size: 1.2rem;
            margin: 1.5rem 0;
        }

label {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

input[type="text"] {
            padding: 0.5rem;
            font-size: 1.2rem;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-bottom: 1.5rem;
        }

button {
            background-color: #4CAF50;
            color: #fff;
            padding: 0.5rem 1rem;
            font-size: 1.2rem;
            border-radius: 5px;
            border: none;
            margin-bottom: 1.5rem;
            cursor: pointer;
        }

p {
            font-size: 1.2rem;
            margin-top: 1.5rem;
        }
    </style>

</body>

</html>