HTML5 Game - Mapping a Location with getCurrentPosition

  1. HOME
  2. HTML5 Game
  3. Geolocation
  4. GeoLocaltion Monitoring

Description

Mapping a Location with getCurrentPosition

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>10.2 Map Me With Error Handling</title>
    <style>
        #mapCanvas {/*from w w  w. j  a  v  a  2 s .co  m*/
            width: 500px;
            height: 300px;
            border-style: solid;
            border-width: 2px;
            margin: 22px 0;
        }

        #btnMapMe {
            float: left;
        }

        #myLocation {
            float: right;
        }
    </style>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        function init() {
            // Add the button click listener 
            let btnMapMe = document.getElementById('mapMe');
            btnMapMe.addEventListener('click', mapMe, false);
        }
        function geoSuccess(position) {
            let myLocationDiv = document.getElementById('myLocation');

            let posLat = position.coords.latitude;
            let posLng = position.coords.longitude;
            let posAccuracy = position.coords.accuracy;

            myLocationDiv.innerHTML = 'Lat: ' + posLat + ', Lng: ' + posLng +
                '<br>Accuracy: ' + posAccuracy;

            let myLatlng = new google.maps.LatLng(posLat, posLng);

            let myOptions = {
                zoom: 14,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            let map = new google.maps.Map(document.getElementById('mapCanvas'), myOptions);

            let marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });

            let infoText = '';
            infoText = posLat + ', ' + posLng + '<br>Accuracy: ' + posAccuracy;
            if (position.address) {
                infoText += '<br>' + position.address.city + ', ' + position.address.region;
            }

            let infowindow = new google.maps.InfoWindow();
            infowindow.setContent(infoText);
            infowindow.open(map, marker);
        }
        function geoErrorHandler(error) {
            let errMessage = 'ERROR: ';
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    errMessage += 'User did not share geolocation data.';
                    break;
                case error.POSITION_UNAVAILABLE:
                    errMessage += 'Could not detect current position.';
                    break;
                case error.TIMEOUT:
                    errMessage += 'Retrieving position timed out.';
                    break;
                default:
                    errMessage += 'Unknown error.';
                    break;
            }
            document.getElementById('myLocation').innerHTML = errMessage;
        }

        function mapMe() {
            let myLocationDiv = document.getElementById('myLocation');
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(geoSuccess, geoErrorHandler);
                myLocationDiv.innerHTML = 'Retrieving your location...';
            } else {
                myLocationDiv.innerHTML = 'Geolocation API Not Supported';
            }
        }
        window.addEventListener('load', init, false);
    </script>
</head>

<body>
    <div id="container">
        <div id="mapCanvas"></div>
        <div id="btnMapMe">
            <button id="mapMe">Map Me</button>
        </div>
        <div id="myLocation"></div>
    </div>
</body>

</html>

Related Topic