The Geolocation API is useful for getting the user's location
For privacy reasons, users must allow geolocation for you to be able to access their location
Geolocation has many uses. One example was one that you can see on the left of the page, generating a map based on location given. You can do this by pairing the Geolocation API with another API, the Google Maps API.
See the below links for how to use the APIs:
I implemented both APIs using the following code:
navigator.geolocation.getCurrentPosition(function(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=8&size=400x300&sensor=false";
document.getElementById("element").innerHTML = "<img src='"+img_url+"'>";
});
where element is the id of any <div> in the body
Part 1 :: Tutorial Challenge
Welcome to Browsergame, a must for every developer.
This game will test your browser, JavaScript, HTML and CSS skills.
Remember that your best friend is a search engine such as Google.
This game is based around the console, and it will be useful in every challenge. In the console, you will use both the Console and Elements tab. I will communicate to you via the Console tab.
You can always access the console by clicking or opening JavaScript developer tools > Developer Console. Try opening it now. For more go to
NB: Please do not use Firebug's console as it does not remember messages before the console is opened.
You will have to use native browser methods, change variables and change page styles using the console or change browser settings to succeed.
It will be hard at times, but remember to always look at the clue given carefully. If it's too hard, you can do the next challenge first.
Well I guess it's time for your first challenge.
Clue:
Challenge Complete
It won't always be this easy (in fact, never again)
This is a map of your location based on information received:
