JoBbOARD/g_maps.html at main · Favourez/JoBbOARD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
    <title>My Google Map</title>
    <style>
        /* Set the size of the map div to fill the entire screen */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<!-- The div where the map will be displayed -->
<div id="map"></div>

<!-- Load the Google Maps JavaScript API -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6jKjuPclpVAaeWHFLIvhhKzN4ILkAubM&callback=initMap" async defer></script>
<script>
    // Initialize and add the map
    function initMap() {
        // Default location (latitude and longitude)
        var defaultLocation = { lat: -25.344, lng: 131.036 };

        // Create the map centered on the default location
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: defaultLocation
        });

        // Default marker
        var marker = new google.maps.Marker({ position: defaultLocation, map: map });

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    var userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    // Re-center the map and place a new marker at the user's location
                    map.setCenter(userLocation);
                    map.setZoom(12);  // Zoom in closer to the user's location
                    marker.setPosition(userLocation);
                },
                function() {
                    handleLocationError(true, map.getCenter());
                }
            );
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, pos) {
        alert(browserHasGeolocation
              ? 'Error: The Geolocation service failed.'
              : 'Error: Your browser doesn\'t support geolocation.');
    }
</script>

</body>
</html>