Geolocation

Hungarian geolocation tutorial

What realy Geolocation is? The Geolocation modul of HTML5 returns the geographical position of device (computer, tablet, mobil etc.) that displays the webpage. We can send this to Google Maps. The only flaw is that it is not defined what helps to determine this location. (built-in GPS, based by cell informations or by IP Address etc.) If the Technical Specification in the final version is going to determine this a little bit specifically then we are going to get a very useful and fast spread tool in our hands.
Until that it is worthwhile to deal with this as curiosity. Unfortunately if there is no GPS modul in the device it can be locate our position approximately with 35-50km accuracy based by my experience. But I have got 200km deviation too. Let’s start then.

Checking the browser.

First of all we are going to check that whether our browser supports the new device or not. The code below only queries that our browser capable to use geolocation or not. If not then it returns an error signal. If it is capable then returns a blank screen.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Geolocation</title>
 </head>

<body>
 <script type="text/javascript">
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(success, error);
 } else {
 alert('Your browser does Not support the Geolocation!');
 }
 </script>
 </body>
 </html>

Working example.

Navigator.Geolocation objektum

The object has 3 methods what we can use:

getCurrentPosition() – determines our current position
watchPosition() – turns the function into monitoring mode. Querying the coordinates continually
clearWatch() – turn of monitoring mode

Simple example:

...
 function getLocation(){
 var geolocation = navigator.geolocation;
 geolocation.getCurrentPosition(showLocation, errorHandler);

}

Function showLocation(position){
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;

}
 ...

We rushed forward a bit in the code because it contains the “position” too.

Locations properties

This fit into the “position” in the example above. Let’s see what can we query.

timestamp – Returns the date and place
coords.latitude – Latitude of our position.
cooords.longitude – Longitude of our position.
coords.accuracy – Returns our location. The accuracy is in meter!
coords.altitude – Returns our positions altitude.
coords.altitudeAccuracy – We get the last objects accurasy.
coords.speed – Gives the speed based by the last position.

With the following example we are going to determine the coordinates of our presumed location. We investigate the support of localization with an “if”. If it is OK then we store the queried coordinates in the success function. In case of any problem we call the error function. With the help of “alert” we display our current locations coordinates or the error itself at the end.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Geolocation</title>
 </head>

<body>
 <script type="text/javascript">

function success(position) {
 alert(position.coords.latitude+":"+ position.coords.longitude);
 }

function error(msg) {
 alert("Warning!!! "+msg);
 }

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(success, error);
 } else {
 alert('Your browser does Not support the Geolocation!');
 }
 </script>
 </body>
 </html>

The working code.

In the next example we are going to extend our script a bit and send these coordinates to Google Maps. Let’s see then.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Geolocation/title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 </head>

<body>
 <div id="mapcanvas" style="height: 400px; width:560px;"></div>
 <script>

// Google map
 var myOptions = {
 zoom: 15,
 mapTypeControl: false,
 navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
 // --

function success(position) {
 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 map.setCenter(latlng);
 var marker = new google.maps.Marker({
 position: latlng,
 map: map,
 title:"Got You!"
 });
 }

function error(msg) {
 alert("Warning!!! "+msg);
 }

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(success, error);
 } else {
 alert("There is no Geolocation support!");
 }

</script>

</body>
 </html>

The working example can be available here.

Creative Commons Licenc
Geolocation a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...