Untitled

<!DOCTYPE HTML>
<html lang='en'>
    <head>
        <title>Zara!</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
        <body style = "background-color: #FFF0F5; text-align: center;">
        <div class="alert alert-info" role="alert">
              Location, location, location.
        </div>
            <p>Where are you from?</p>
            <select>
                <option value="Dubai" selected>--</option>
                <option value="Australia">Australia</option>
                <option value="Dubai">Dubai</option>
                <option value="Other">Other</option>
            </select>
            <p></p>
            <p id = "oka"></p>
            <p id = "oki"></p>
            <p></p>
            <button id="map">
                Click for ya map
            </button>
            <script>
                document.querySelector('select').onchange = function() {
                    document.querySelector('#oka').innerHTML = "Okay, so you're saying you're from "+this.value+"."
                }
                navigator.geolocation.getCurrentPosition(function(position) {
                   document.querySelector('#oki').innerHTML = ("Well, according to my data your current position is "+position.coords.latitude + ", " + position.coords.longitude + '. Zara will be with you shortly.');
                });
                document.querySelector('#map').onclick = function() {
                    location.href = "https://www.google.com/maps/place/";
                }
            </script>
        </body>
</html>