JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <script src="http://j.maxmind.com/app/geoip.js" charset="ISO-8859-1" type="text/javascript"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    </head>
    
    <body>
        <div id="canvas" style="width: 600px; height: 400px"></div>
    </body>

</html>

JavaScript

function get_by_ip() {
    var lat = geoip_latitude();
    var lng = geoip_longitude();
    map_it(lat, lng);
}

//var time_perm = window.setTimeout(get_by_ip, 10000);


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

    navigator.geolocation.getCurrentPosition(
    displayPosition,
    displayError, {
        enableHighAccuracy: true,
        timeout: timeoutVal,
        maximumAge: 0
    });
} else {
    //get_by_ip();
}


function displayPosition(position) {
    //window.clearTimeout(time_perm);
    // configuration
    var myZoom = 12;
    var myMarkerIsDraggable = true;
    var myCoordsLenght = 6;
    var defaultLat = 51.618017;
    var defaultLng = 2.48291;
    //document.getElementById('latitude').value = defaultLat;
    //document.getElementById('longitude').value = defaultLng;

    map_it(defaultLat, defaultLng);

}

function map_it(lat, lng) {
    var map = new google.maps.Map(document.getElementById('canvas'), {
        zoom: 8,
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    // centers the map on markers coords
    //map.setCenter(myMarker.position);
    // adds the marker on the map
    //myMarker.setMap(map);
}

function displayError(error) {
    var errors = {
        1: 'Permission denied',
        2: 'Position unavailable',
        3: 'Request timeout'
    };
    alert("Error: " + errors[error.code]);
    get_by_ip();
}