JSFiddle - React, Tailwind, and code Playground

by edgren

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>

<div id="map-distance" style="background-color: #eaeaea; border: 2px solid #d1d1d1; height: 300px; width: 100%;"></div>

JavaScript

var rendererOptions = {
        draggable: false
    };

    if(navigator.geolocation) {
        var timeoutVal = 10 * 1000 * 1000;

        navigator.geolocation.watchPosition(
            displayPosition,
            displayError,
            { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
        );
    } else {
        alert('Din webbläsare stödjer inte någon geologisk lokalisering med hjälp av HTML5');
    }

    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var directionsService = new google.maps.DirectionsService();
    var marker_gps;
    var map_gps;
    var options_gps;





    function displayPosition(position) {


        /***********************
        **    GPS-POSITION    **
        ************************/

        directionsDisplay = new google.maps.DirectionsRenderer();
        localStorage.coor = position.coords.latitude.toFixed(6) + ',' + position.coords.longitude.toFixed(6);

        var gps_coor = new google.maps.LatLng(position.coords.latitude.toFixed(6), position.coords.longitude.toFixed(6));

        if(typeof(marker) != 'undefined') marker.setMap(null);

        localStorage.accuracy = position.coords.accuracy;
        document.getElementById('accuracy').innerHTML = number_format(localStorage.accuracy) + ' meter';

        directionsDisplay.setMap(map_gps);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        marker_gps = new google.maps.Marker({
            position: gps_coor,
            draggable: false,
            map: map_gps
        });

        var circle_gps = new google.maps.Circle({
            center: gps_coor,
            radius: position.coords.accuracy,
            map: map_gps,
            fillColor: '#3333ff',
            fillOpacity: 0.2,
            strokeColor: '#3333ff',
            strokeOpacity: 0.5,
            strokeWeight: 1
        });



        /*****************************
        **    FÄRDSÄTT (DISTANS)    **
     ...