JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript">
            function getLocation() {
                navigator.geolocation.getCurrentPosition(handleSuccess, handleError);
            }

            function initiate_watchlocation() {
                if (watchProcess == null) {
                    watchProcess = navigator.geolocation.watchPosition(handleSuccess, handleError);
                }
            }

            function stop_watchlocation() {
                if (watchProcess != null) {
                    navigator.geolocation.clearWatch(watchProcess);
                }
            }

            function handleSuccess(position) {
                drawMap(position);
            }

            function handleError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("User did not share geolocation data");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("Could not detect current position");
                        break;
                    case error.TIMEOUT:
                        alert("Retrieving position timed out");
                        break;
                    default:
                        alert("Unknown Error");
                        break;
                }
            }


            function drawMap(position) {
                var container = $('#map_canvas');
                var myLatLong = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var mapOptions = {
                    center: myLatLong,
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new...

CSS

html {
    height: 100%
}
body {
}
#map_canvas {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 14px -9px rgba(0, 0, 0, 0.29);
    height: 500px;
    margin: 2em auto;
    width: 70%;
    display: none;
}
div button {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.29);
    padding: 5px;
}
#getLocation {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.29);
    display: block;
    margin: 1em auto;
    padding: 5px;
}
#map_canvas > div > div:nth-child(3) {
    display: none;
}

JavaScript

$('#getLocation').click(getLocation);
$('#initWatch').click(initiate_watchlocation);
$('#stopWatch').click(stop_watchlocation);