HTML and CSS Reference
In-Depth Information
alert("unknown error");
break;
}
}
function updatePosition(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var newLocation = lat + ',' + long;
//This fires everytime the users location changes
if (newLocation === MAGIC_LOCATION) {
//You win!
productFound();
location.innerHTML = "<p><strong style='color:red'>" + newLocation + "</strong>";
} else {
location.innerHTML = "<p><strong style='color:blue'>" + newLocation + "</strong>";
}
}
function productFound() {
navigator.geolocation.clearWatch(watch);
window.alert("You Win!")
//show coupon to the user to buy the product at the store
}
function adInit(event) {
console.log(event.type)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
console.error('geo not supported');
//supply different ad experience
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
As you can see from this example, I've extended this to make a unique game out of it. Remember the “You're Hot,
Warm, or Cold” game? You know, the one where the user tried to find something blindly with the help of another?
Well, this can be replicated in the digital world now! Try to take this example and update it to use a store location in
your area. Maybe even set a time limit. How about if a user can find it within the allotted time, they get a special offer?
The possibilities are endless with this technology.
Again, remember that geolocation is an opt-in process, and the user will have to explicitly “agree” or “allow” this
feature. Make sure you handle all the responses a user could make as well as paying attention to the polling of the
user's location. With this API, developers can take advantage of the
watchPosition
method, which will continuously
check for the user's updated position if they're on the go. While great for providing accurate and real-time directions,
keep in mind that the more frequent you poll and request the user's exact location, the more battery and resources
you will consume because of processing the requests. It's good to keep it at a minimal threshold for mobile users or
