Mobile Phone Technology and Geolocation

Introduction

This is not the first time I am blogging about mobile phones and internet usage on Mobile Phones. There is a vast number of manufacturers providing powerful smart phones that are able to provide internet access. Most modern smart phone provide a comfortable view and use for surfing the web. The only problem is the internet itself. Most web pages do not fit the small screens on mobile phone and therefore they are not easily accessible. Fortunately, major companies are providing mobile versions of their services or mobile applications that allow smoother viewing of the sites content. The mobile version of a website is becoming more and more popular nowadays as people are moving towards mobile devices.

Although there are various different mobile brands, most mobiles use similar operating system, with some manufacturers adding a touch of their own. The most common OSes are Apple's IOS, Symbian, RIM, Windows Phone and Android. Most of the manufacturers are moving towards Android and Windows Phone. Even Nokia decided to go towards Windows Phone instead of continuing to develop their Symbian interface.

As mobiles become faster and better, so does their internet browser. Most mobile phones already have a browser that supports many HTML 5 features. HTML 5 was identified by many as the way to go for the future of the internet. Most smart phone also make use of Geolocation features that find the exact location of the device using a GPS system. For this pot I experimented with some geolocation API and also I decided to use some Google map APIs as well.

Using the Geolocation Features

Getting a Geolocation is easy. The following code shows you how to get the longitude, latitude and time of location of a device using geolocation.

<script type="text/javascript">
navigator.geolocation.getCurrentPosition(userLocated, locationError);

function userLocated(position){

var lat = position.coords.latitude;
var long = position.coords.longitude;
var timeOfLocation = position.timestamp;
document.write(lat+"<br/>"+long+"<br/>"+timeOfLocation);
}


function locationError(error){
alert(error.code);
}

By calling navigator.geolocation.getCurrentPosition(userLocated, locationError); the function userlacated is called if a location is found, while locationError is called if an error occurs.The function userLocated has position as parameter. From this parameter, the coordinates and other data can be obtained.
This Link should return the geolocation of the device http://mark-galea.webs.com/Geolocation.html.

Using Google Maps together with Geolocation

After a bit of research I decided to use google maps. To display the map with the current location, is easy as the code is provided by google in a way that copy and paste does it all. Then I decided to display the name of the location of the coordinates being displayed. This was slightly harder for me as I took the wrong approach.

While reading the google maps documentation I read that I needed to make an XML http request to get the data and display it. This worked only in internet explorer locally. This is because Chrome does not allow requests from local files. When I uploaded the file to a web server, the code didn't work on any browser. This was due to the limits in the cross-domain requests that do not allow requests from different domains. I was stuck for hours trying to find a solution for the problem, until I realised I was looking at the problem the wrong way. Looking further in the documentation I found that Google created JavaScript API for usage on the client side and what I was doing was only required for some server side processes.

Code for obtaining an address from coordinates and vice versa can be found in the documentation. I didn't notice immediately what I was doing wrong because of my lack of experience in some JavaScript features which I never used before. Also the Google maps documentation I was reading only states that there is another approach for JavaScript client side users, in a small paragraph , which I missed because of my habit to just skim through documents. I must say the tools provided by Google make it very easy to display items on the map. Since I read how to extract addresses using XML requests I will also show some code to get coordinates from addresses using an XML HTTP Request.

A get request to the following address returns an XML file containing a list of possible addresses and coordinates.

http://maps.googleapis.com/maps/api/geocode/xml?address=Valletta,Malta,+CA&sensor=true

<GeocodeResponse>
  <status>OK</status>
  <result>
   <type>locality</type>
   <type>political</type>
   <formatted_address>Valletta, Malta</formatted_address>
   <address_component>
    <long_name>Valletta</long_name>
    <short_name>Valletta</short_name>
    <type>locality</type>
    <type>political</type>

   </address_component>
   <address_component>
    <long_name>Malta</long_name>

    <short_name>MT</short_name>
    <type>country</type>
    <type>political</type>
  </address_component>
  <geometry>
   <location>
    <lat>35.8977900</lat>
    <lng>14.5141060</lng>
   </location>
   <location_type>APPROXIMATE</location_type>
   <viewport> 
   <southwest>
     <lat>35.8887508</lat>
     <lng>14.4980986</lng>
   </southwest>
   <northeast>
     <lat>35.9068282</lat>
     <lng>14.5301134</lng>
   </northeast>
  </viewport>
  <bounds>
   <southwest>
    <lat>35.8924169</lat>   
    <lng>14.5042573</lng>
   </southwest>
  <northeast>
   <lat>35.9036630</lat>
   <lng>14.5207773</lng>
  </northeast>
 </bounds>  
</geometry>
 <partial_match>true</partial_match>
 </result>
</GeocodeResponse>

An XML Similar to the one above is obtained from the request. By reading through the XML data can be taken. The above example shows results for the address Valletta, Malta. There are other approaches other than XML, in fact Google recommends JSON. This approach cannot be used however in javascript as corss-Domain Requests are not allowed and therefore the HTTP Request is ignored.

Google Created Javascript APIs which include methods that return these results without needing to make any request.

function getLocaFromCoord(latlng)
{
var geocoder = new google.maps.Geocoder();
   geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
}

The function above puts a map marker and displays a particular location, including, its name, given the exact coordinates.

function getCoordFromAddress(address)
{
 var geocoder = new google.maps.Geocoder();
    if (geocoder) {
      geocoder.geocode({ 'address': address }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             getLocaFromCoord(results[0].geometry.location);
         }
         else {
            alert("Geocoding failed: " + status);
         }
      });
   }
}

The Function above searches for a particular address, and gets, its coordinates if found. Then calls the previously explained function to display the coordinates as a place on the map.

Below are some screen shots of a small website that I made. This site, identifies your geolocation and displays it on the map. If the location is wrong, you can type your exact address and your location should be displayed on the map.

The Website is on-line at this link: http://mark-galea.webs.com/MapsAPI.html

The Site is styled to work on most mobile phones, but I only tested it on an Android Desire S and it worked perfectly showing my exact location and displaying its name in the info window.

Conclusion

Working with geolocations and Google maps was quite entertaining for me. Although I got confused at first, Google maps are quite easy to work with and a lot of help is provided on-line, with a lot of code ready made. Geolocation can be uses to make location based services which are much more accurate than those used by ip locations. This is improved especially in mobile devices as these are usually equipped with GPS devices that offer very accurate positioning. Location data however can be used badly in the wrong hands so attention should be taken before allowing any location to be given.