Quantcast
Channel: Help! with 2.0 - Twine Forum
Viewing all articles
Browse latest Browse all 1844

Geolocation when passage loads

$
0
0
Hello everyone, I am new to Twine and I am trying to accomplish something very simple. I would like to display a small map with the user location when they reach a certain passage. So far I managed to use a script that shows the map when the user presses a button. This is the code:
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=&quot;
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

As you can see, when the user presses the Try me button, the getLocation function is called and the map is showed correctly. Is it possible to obtain the same behaviour without the button press? I am using the Harlowe story format.

Viewing all articles
Browse latest Browse all 1844

Trending Articles