TiMapsBasic.js

// Origonally from http://www.oodlestechnologies.com/blogs/GOOGLE-MAPS-IN-TITANIUM
// Also see this great resource: https://wiki.appcelerator.org/display/guides/Tracking+Position+and+Heading#TrackingPositionandHeading-ContinuallymonitortheGPSposition


/*
mapType : Indicates what type of map should be displayed.(Ti.Map.STANDARD_TYPE, Ti.Map.SATELLITE_TYPE  and Ti.Map.HYBRID_TYPE ).
region : This is an object that contains the 4 properties defining the visible area of the MapView.(latitude and longitude of a region can be represented with a different level of zoom using latitudeDelta and longitudeDelta properties).
animate :  A boolean that indicates whether or not map actions, like opening and adding annotations, should be animated.
userLocation : A boolean that indicates if the map should attempt to fit the MapView into the region in the visible view.
userLocation : A boolean that indicates if the map should show the user's current device location as a blue dot on the map.
There are 2 more components annotations and routes. They allow us to add places of interest to our maps as well as plot paths between them.
*/

var win = Ti.UI.createWindow();
 
var mapView = Titanium.Map.createView({
    mapType : Titanium.Map.STANDARD_TYPE,
    region : {latitude:37.389569, longitude:-122.050212,latitudeDelta:0.1, longitudeDelta:0.1},             
    animate : true,
    regionFit : true,
    userLocation : false
});
 
win.add(mapview);
 
win.open();

/*
Annotations :
Annotations, created with the Ti.Map.createAnnotation() function, allow us to mark places on MapViews 
with pins, images, and text. 
We can add number of annotation in a MapView by using array.Let'smodify the basic MapView example.
*/

var win = Ti.UI.createWindow();
 
var annotations1 = Ti.Map.createAnnotation({
        latitude: 37.389569,
        longitude: -122.050212,
        title: 'Title A',
        subtitle: 'Subtitle A',
        animate: true,
        image:'pin.png',
        leftButton: 'google.jpg'
   });
     
var annotations2 = Ti.Map.createAnnotation({
        latitude: 37.422502,
        longitude: -122.0855498,
        title: 'Title B',
        subtitle: 'Subtitle B',
        image:'pin.png',
        animate: true,
   });
     
var annotations = [annotations1, annotations2];
var mapview = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {latitude:37.389569, longitude:-122.050212, latitudeDelta:0.02, longitudeDelta:0.02},       
    animate:true,
    regionFit:true,
    userLocation:false,
    annotations: annotations
});
win.add(mapview);
win.open();


/*
Routes(iOS only)
Routes are an iOS-only feature. They allow us to draw paths between locations on a MapView. 
These paths can be driving directions, walking paths etc, to connect point A to point B.
*/

var win = Ti.UI.createWindow();
 
var annotations1 = Ti.Map.createAnnotation({
        latitude: 37.389569,
        longitude: -122.050212,
        title: 'Title A',
        subtitle: 'Subtitle A',
        animate: true,
        image:'pin.png',
        leftButton: 'google.jpg'
   });
     
var annotations2 = Ti.Map.createAnnotation({
        latitude: 37.422502,
        longitude: -122.0855498,
        title: 'Title B',
        subtitle: 'Subtitle B',
        image:'pin.png',
        animate: true,
   });
     
var annotations = [annotations1, annotations2];
var mapview = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {latitude:37.389569, longitude:-122.050212, latitudeDelta:0.02, longitudeDelta:0.02},        
    animate:true,
    regionFit:true,
    userLocation:false,
    annotations: annotations
});
win.add(mapview);
var socure = [37.389569, -122.050212];
var destination = [37.422502, -122.0855498];
var mode = "d";
 
var url = "http://maps.google.com/maps?saddr="+socure+"&daddr="+destination+"&f=d&sensor=true&doflg=ptm&hl=en&dirflg="+mode+"&output=kml";          
 
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET',url);
xhr.onload = function()
{
    var xml = this.responseXML;
    var coords = xml.documentElement.getElementsByTagName("LineString");
     
    var points = [];
    for(var cc=0; cc < coords.length; cc++)
    {
        var line = coords.item(cc);
        var str = line.firstChild.text.split(" ");
        for(dd = 0; dd < str.length; dd++)
        {
            var loc = str[dd].split(',');
            if(loc[0] && loc[1])
            {
                points.push({latitude: loc[1],longitude: loc[0]});
            }
        }
     }
     var route = {name:'mapRoute', points:points, color: "blue", width:4};
    mapview.addRoute(route);
}
xhr.send();
win.open();