user-map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hospital on Map</title>
    <link rel="stylesheet" href="src/css/user-map.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4&libraries=places"></script>
</head>
<body>
    <div class="container">
        <h1>Hospitals</h1>
        <div id="map" style="height: 500px; width: 100%;"></div>
        <button id="viewListBtn">Back to List</button>
    </div>

    <script>
        function initMap() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    const userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    const map = new google.maps.Map(document.getElementById("map"), {
                        center: userLocation,
                        zoom: 14
                    });

                    const service = new google.maps.places.PlacesService(map);
                    const request = {
                        location: userLocation,
                        radius: '5000',
                        type: ['hospital', 'pharmacy']
                    };

                    service.nearbySearch(request, (results, status) => {
                        if (status === google.maps.places.PlacesServiceStatus.OK) {
                            results.forEach(place => {
                                const marker = new google.maps.Marker({
                                    map: map,
                                    position: place.geometry.location,
                                    title: place.name
                                });

                                const infoWindow = new google.maps.InfoWindow();
                                google.maps.event.addListener(marker, 'click', () => {
                                    infoWindow.setContent(`
                                        <div>
                                            <h3>${place.name}</h3>
                                            <p><strong>Address:</strong> ${place.vicinity}</p>
                                            <p><strong>Rating:</strong> ${place.rating ? place.rating : 'No rating'}</p>
                                        </div>
                                    `);
                                    infoWindow.open(map, marker);
                                });
                            });
                        } else {
                            console.error('Places request failed due to: ' + status);
                        }
                    });
                }, error => {
                    console.error('Error getting user location: ' + error.message);
                });
            } else {
                console.error('Geolocation is not supported by this browser.');
            }
        }

        window.onload = initMap;

        document.getElementById('viewListBtn').addEventListener('click', () => {
            window.location.href = 'user.html';
        });
    </script>
</body>
</html>