GOOGLE MAPS IN TITANIUM

Posted By : Arpit Sharma | 20-Jun-2012
titanium

Here, you'll learn how to use Google Maps in Titanium to visually represent location data via maps, annotations and  routes. The context of location is one of the most powerful features of mobile apps, and soon you'll be equipped to visualize that data using native UI components through Titanium.

  • Display a MapView.
  • Annotations.
  • Routes(iOS only).

Display a MapView : 

The MapView allows mobile device's to view geographic data and add annotations and routes. In its most basic form, the MapView can simply display a basic map using latitude and longitude.

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();

  • 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.

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();

You can change the color , width and mode of direction.

d = Driving Direction

w = Walking Direction 

Arpit Sharma
[email protected]

http://oodlestechnologies.com/

Related Tags
mobile application
android
Flutter
Kotlin
ios
css
swift
React Native
phonegap
cordova

About Author

Author Image
Arpit Sharma

Arpit has been developing Android and iPhone applications for a while now and is expert in mobile application development . He excels in developing mobile applications with location based intelligence. Arpit loves Modelling as a hobby.

Request for Proposal

Name is required

Comment is required

Sending message..