Introduction
The Geolocation API enables a web-page to get the current position of the user, provided that the user has given the browser permission to disclose the position.
This post prints the position returned as latitude and longitude coordinates as well as the accuracy of the position.
The post also uses the position returned to place the camera in Google Earth.
I was actually a bit suprised (scared?) when the camera zoomed in exactly on my house (the accuracy returned by the Geolocation API is 30 meters). My laptop does not have a GPS, so how does it now my position so accurately?
While writing this post I got into trouble with my first Google earth post. While it looked OK when the post was shown alone it did not work correctly in the main window any more. In the main window all all my posts are shown and there my first post had two instances of the Google Earth plugin, instead of one. It took a while before I realized that the id-attribute of the div-element was identical in the two posts. When both posts are shown in the same page this causes a problem since the id-attribute is no longer unique on the page. Reading this is also a good idea: http://stackoverflow.com/questions/1841916/how-to-avoid-global-variables-in-javascript
The Geolocation API
Most of the code used for this sample is copied directly from here.
Press the button to get your position, your browser will prompt you for permission. I have included some screenshots from the Google Chrome browser below.
- position will appear here -
When a page tries to get the current position the browser will ask for the users permission trough som kind of prompt or through some privacy seting.
In Chrome a location icon in the address field shows that the page has requested you location. A red cross is shown if permission was denied.
Using the location in Google Earth
The button below sets the camera in Google Earth using the position returned by the Geolocation API.
It can actually be a bit scary; the geek in me said 'wow', while the citizen thought: 'what the ....'.
No comments:
Post a Comment