Appcelerator Titanium Map views

Mapviews (or map views) are objects within the Appcelerator Titanium IDE that you can incorporate into your applications.


Like all other objects the principle is the same. You need to create an instance of the object, then place the object. For example if you have a window and you want to display a map within the window you would create the window, create the mapview, add the mapview to the window then open the window.
Here is a simple example...


//declare our window
var window1 = Titanium.UI.createWindow({
   title:'Map',
})


 //declare our map
var mymap = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    visible:true
})

//add our map to the window
window1.add(mymap);


//open the window
window1.open();

This is the basic technique used to create a mapview within Appcelerator. This however is a very basic example and will not provide any information to the mapview, so it will effectively be blank.
 
We need to provide our map with the following information...


Latitude, longitude and delta values. The latitude and longitude values represent a coordinate for the canter of the map, our deltas provide scale information to the map to determine how large an area to display.


We provide this information within the "region" of our map view code...

region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5}
 

 You will end up with something like the following...
 

 //declare our map
var mymap = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,

region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},

    visible:true
})

It is possible to obtain latitude and longitude information from Google maps. The delta values are something you will need to experiment with depending on your application and its needs.

Happy coding!