Converting addresses to latitude and longitude locations

Getting our location is all well and good when it's done for us, but humans don't think of places in terms of latitude and longitude values. We use good old addresses to define points on a map. To convert addresses to decimal latitude and longitude values, we can again use the Ti.Geolocation namespace, and specifically a method within it called forwardGeocoder. Titanium has built-in methods for geocoding that utilize and essentially black box the services provided by the Apple and Google Maps APIs. The Geocoding API processes the conversion of addresses (such as 1600, Amphitheatre Parkway, Mountain View, CA) into geographic coordinates (such as latitude 37.423021 and longitude 122.083739), which you can use to place markers or position the map. This API provides a direct way to access a geocoder via an HTTP request.

How to do it...

Firstly, we need to create some input fields so that the user can provide us with a starting and an ending address. Let's create a new View and add it to the top of our Window above the MapView. We'll also need to add a button to fire the forwardGeocoder conversion. The background gradient image for the View is available within the images directory of the source code. Add the following code at the bottom of your app.js file, just above the win1.open(); line:

//create the search view
var searchView = Ti.UI.createView({
    top: 0,
    left: 0,
    width: 320,
    height: 110,
    backgroundImage: 'images/gradient.png'
});

//style it up a bit
var bottomBorder = Ti.UI.createView({
    height: 1,
    width: 320,
    left: 0,
    bottom: 0,
    backgroundColor: '#000'
});
searchView.add(bottomBorder);

//add a search box for starting location
var txtStartLocation = Ti.UI.createTextField({
    backgroundColor: '#fff',
    left: 10,
    top: 20,
    width: 200,
    height: 30,
    borderColor: '#000',
    borderRadius: 5,
    hintText: 'Current Location',
    paddingLeft: 10
});
searchView.add(txtStartLocation);

//add a search box for starting location
var txtEndLocation = Ti.UI.createTextField({
    backgroundColor: '#fff',
    left: 10,
    top: 60,
    width: 200,
    height: 30,
    borderColor: '#000',
    borderRadius: 5,
    hintText: 'End Location',
    paddingLeft: 10
});
searchView.add(txtEndLocation);

//add the button with an empty click event, this will fire off
//our forwardGeocoder
var btnSearch = Ti.UI.createButton({
    width: 80,
    height: 30,
    top: 60,
    right: 10,
    color: '#fff',
 title: 'Search',
    borderRadius: 3
});

//btnsearch event listener fires on button tap
btnSearch.addEventListener('click',function(e){
    
});
searchView.add(btnSearch);

Now that we have some input fields, let's use the search button to capture those addresses and convert them into location values that we can use to define the region of our MapView. Put the next block of code into your button's click event handler:

//btnsearch event listener fires on button tap
btnSearch.addEventListener('click',function(e){

 //check for a start address
 if(txtStartLocation.value !== '')
 {
    //works out the start co-ords
    Ti.Geolocation.forwardGeocoder(txtStartLocation.value, function(e){
        //we'll set our map view to this initial region so it
        //appears on screen
        mapview.region = {latitude: e.latitude, 
                          longitude: e.longitude, 
                          latitudeDelta:0.5, 
                          longitudeDelta:0.5
                         };  
        
  console.log('Start location co-ordinates are: ' + 
                 e.latitude + ' lat, ' + e.longitude + 
                 'lon');    
    });
 } 
 else 
 {
    alert('You must provide a start address!');
 }
 
 //check for an end address
 if(txtEndLocation.value !== '')
 {
     
    //do the same and work out the end co-ords
    Ti.Geolocation.forwardGeocoder(txtEndLocation.value, function(e){
console.log('End location co-ordinates are: ' + e.latitude + ' lat, ' + e.longitude + ' lon');    
    });
 } 
 else 
 {
    alert('You must provide an end address!');
 }
    
});

searchView.add(btnSearch);
win1.add(searchView);

Run your app in the emulator, provide a start address and an end address (for example, Boston and Cambridge), and hit search. After a few seconds, you should get the geolocation values of these addresses output to the console, and MapView should reorient itself to the region surrounding your starting address. The following screenshot shows you the start and end addresses converted to latitude and longitude coordinates and output to the Appcelerator Studio console:

How it works…

The first section of code in this recipe is simple. We create a couple of TextFields for the start and end addresses and capture the click event of a Button component, wherein we pass those address values to our Ti.Geolocation.forwardGeocoder method.

The forward geolocation task is actually performed against the Maps servers. Titanium has wrapped this into one simple method for you to call, instead of having to manually carry out a properly formatted GET post against the Maps servers and parse the returned CSV, JSON, or XML data.

If you prefer to use Google to perform geocoding, you can still use Google Maps geocoding service by using an HttpClient and reading the instructions on Google's own website at https://developers.google.com/maps/documentation/geocoding/intro.