Geolocation when passage loads

alexdd

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=";
    +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.

TheMadExile

Try this markup:

<p id="map"></p>
<script>showLocationMap('#map')</script>

You'll also need the following JavaScript: (goes in Story JavaScript)

window.showLocationMap = function (selector) {
	var $map = $(selector);

	function success(position) {
		$map.empty().append(
			'<img src="https://maps.googleapis.com/maps/api/staticmap?center=' +
			position.coords.latitude +
			',' +
			position.coords.longitude +
			'&zoom=14&size=400x300&sensor=false">'
		);
	}

	function failure(error) {
		switch (error.code) {
		case error.PERMISSION_DENIED:
			$map.text('User denied the request for Geolocation.');
			break;
		case error.POSITION_UNAVAILABLE:
			$map.text('Location information is unavailable.');
			break;
		case error.TIMEOUT:
			$map.text('The request to get user location timed out.');
			break;
		case error.UNKNOWN_ERROR:
			$map.text('An unknown error occurred.');
			break;
		}
	}

	if ($map.length === 0) {
		$map.text('Map element not found.');
	}
	else if (!navigator.geolocation) {
		$map.text('Geolocation is not supported by this browser.');
	}
	else {
		$map.text('Retrieving location.  Please wait…');
		navigator.geolocation.getCurrentPosition(success, failure);
	}
};

alexdd

Thanks a lot! I haven't tried it yet, but I will give it a go as soon as I get back to my project.