GOOGLE MAPS IN TITANIUM
Posted By : Arpit Sharma | 20-Jun-2012
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]
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.