I am using titanium and the google maps v2 for android module. I have a table view which when clicked, based on the row opens a new window which I am passing a number of properties to it based on the rowData. This is working fine, now my problem is that the user has an option of clicking a map view button and seeing a list of pins on a map as opposed to my table view. I need to be able to let the user click on any given annotation (like the way a user could click on a row) and open a window, passing properties to it based on the specific annotation clicked. I don't know how to approach this. I have an event listener on the map and am checking the source but I don't know how to access the properties of the annotation needed to open a new window. My code is below for my window which contains a map view with a set of annotations passed to it from a previous page where a web service pulled down information and added an annotation in each iteration of the loop:
var MapModule = require('ti.map');
var Map = MapModule.createView({
userLocation: true,
mapType: MapModule.NORMAL_TYPE,
animate: true,
region:{latitude: 53.422606, longitude: -7.944465, latitudeDelta: 4, longitudeDelta: 4},
top: '50dp',
left:'10dp',
right:'10dp',
bottom:'10dp',
borderRadius:6,
annotations:self.MapAnnotations,
zIndex:200
});
Map.addEventListener('click', function(e){
Ti.API.info("e.type ----------------- " + e.type);
Ti.API.info("stringified e.clicked source ---------------- " + JSON.stringify(e.clicksource));
var check = JSON.stringify(e.clicksource);
if (JSON.stringify(e.clicksource) == '"title"'){
console.log("Can i get the parent ------- " + e.parent);
console.log("In the if statment for title---------------");
console.log("e.jobID --------- " + e.jobID);
var w = Titanium.UI.createWindow({
url:'ui/handheld/SearchJobsDetailed.js',
backgroundColor: "#204581",
JobID:e.jobID,
Title:e.title,
Trade:e.trade,
Urgency:e.urgency,
Description: e.description,
Photo: e.photo,
JobStatus: e.jobStatus,
ClientID: e.clientID,
DatePosted: e.datePosted,
Email:e.Email,
Mobile:e.Mobile,
navBarHidden:true,
APP_URL:e.APP_URL
});
w.open();
}
});
This is a snippet of my code from the page previous to the map i.e. the page with the tableview:
Map_view.addEventListener("click", function (e){
var Map_window=Ti.UI.createWindow({
url:"ui/handheld/MapWindow.js",
backgroundColor: "transparent",
navBarHidden:true,
APP_URL:APP_URL,
modal:false,
MapAnnotations:MapAnnotations
});
SearchJobs_Tab.open(Map_window, {animated:true});
});
and the part where I am pushing annotations to an array:
for(i=0;i<data.length;i++){
Annotations[i]= MapModule.createAnnotation({
latitude: data[i].Latitude,
longitude: data[i].Longitude,
title: capitaliseFirstLetter(data[i].title),
jobID:data[i].jobID,
title:data[i].title,
trade:data[i].trade,
urgency:data[i].urgency,
description: data[i].description,
datePosted: data[i].datePosted,
photo: data[i].photo,
jobStatus: data[i].jobStatus,
clientID: data[i].clientID,
Email: data[i].Email,
Mobile: data[i].Mobile,
APP_URL:APP_URL
});
MapAnnotations.push(Annotations[i]);
Use e.annotation
to reference the annotation that has been clicked. Your Map click eventListener should look something like this.
Map.addEventListener('click', function(e){
if (e.clicksource === 'pin'){
var w = Titanium.UI.createWindow({
url:'ui/handheld/SearchJobsDetailed.js',
backgroundColor: "#204581",
JobID:e.annotation.jobID,
Title:e.annotation.title,
Trade:e.annotation.trade,
Urgency:e.annotation.urgency,
Description: e.annotation.description,
Photo: e.annotation.photo,
JobStatus: e.annotation.jobStatus,
ClientID: e.annotation.clientID,
DatePosted: e.annotation.datePosted,
Email:e.annotation.Email,
Mobile:e.annotation.Mobile,
navBarHidden:true,
APP_URL:e.annotation.APP_URL
});
w.open();
}
});