Search code examples
javascriptandroidgoogle-mapsannotationstitanium

how to open a window with properties based on an annotation clicked


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

Solution

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