Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-12836

Mapsv2 Module: Click event listener stops firing for map pin when clicking the pin twice

    Details

      Description

      When clicking on a pin on a map, an event listener will fire when the pin is clicked and the pin will then be selected. If you click again, the pin is deselected. A third click is expected to fire the event listener and select the pin but nothing happens. Only when another item is clicked (either another pin or the map itself) will the original pin be clickable again.

      var win = Ti.UI.createWindow({fullscreen: false, backGroundColor: 'white'});
       
      //create a couple annotations
      var anno = MapModule.createAnnotation({latitude: 28.606024, pincolor: MapModule.ANNOTATION_RED, longitude: 77.361800, title: "Noida", subtitle: "A point", draggable: true});
      var anno2 = MapModule.createAnnotation({latitude: 28.609527703349123, pincolor: MapModule.ANNOTATION_BLUE, longitude: 77.36846454441547, title: "Noida 2", subtitle: "Another point", draggable: true});
       
      // create labels to show what is going on
      var label1 = Ti.UI.createLabel({text:'Map load event:',width: '100%',top: 10, left :5,color:'#444'});
      var label2 = Ti.UI.createLabel({text:'Map region event:',width: '100%',top: 10, left:5,color:'#444'});
      var label3 = Ti.UI.createLabel({text:'Map click event:',width: '100%',top: 10, left:5,color:'#444'});
      var label4 = Ti.UI.createLabel({text:'Click event source:',width: '100%',top: 10, left:5,color:'#444'});
      var label5 = Ti.UI.createLabel({text:'Map:',width: '100%',top: 10, left:5,color:'#444'})
      var label6 = Ti.UI.createLabel({text:'Annotation: Title: Subtitle: ',width: '100%',top: 10, left:5,color:'#444'});
      var label7 = Ti.UI.createLabel({text:'Lat & Lon:',width: '100%',top: 10, left:5,color:'#444'});
      	
       
      // create the map
      var map = MapModule.createView({
      	userLocation: true,
      	mapType: MapModule.NORMAL_TYPE,
      	animate: true,
      	annotations: [anno, anno2],
      	region: {latitude: 28.605924, longitude: 77.361817, latitudeDelta: 0.05, longitudeDelta: 0.05 },
      	top: '50%'  //Noida
      });
       
      //make a button to go to Noida/MV
      var button=Ti.UI.createButton({
      	title: "Region",
      	top: 0,
      	right: 0
      });
       
      // set variables for location
      var location ="noida";
       
      // toggle location with listener
      button.addEventListener('click', function(){
      	if (location==="noida") {
      		map.region={latitude: 37.390665, longitude: -122.050210, latitudeDelta: 0.05, longitudeDelta: 0.05 };
      		location="mv";
      	} else {
      		map.region={latitude: 28.605924, longitude: 77.361817, latitudeDelta: 0.05, longitudeDelta: 0.05 };
      		location="noida";
      	}
      });
       
      //create a view for the tet fields
      var stuffView = Ti.UI.createView ({
      	top:0,
      	height:'50%',
      	layout: 'vertical',
      	//bottom:'30%',
      	backgroundColor:"black"
      });
       
      // add listener for map load
      map.addEventListener('complete', function(e){
      	label1.color='red';
      	label1.text="Map load event: FIRED";
      	setTimeout(function()
      			{
      				label1.color = '#444';
      	
      			},500);
      	
      });
       
      // listener for region changed
      map.addEventListener('regionchanged', function(e){
      	
      	label2.color='red';
      	label2.text="Map region event: FIRED";
      	label7.color='red';
      	label7.text="Lat & Lon:"+e.latitude+" "+e.longitude;
      	setTimeout(function()
      			{
      				label2.color = '#444';
      				label7.color ='#444';
      			},200);
      });
       
      // Add event listenr to update text fields
      map.addEventListener('click', function(e) {
      	label3.color = 'red';
      	label3.text="Map click event: FIRED";
      	label4.color = 'red';
      	label4.text="Click event source: "+e.clicksource;
      	label5.color = 'red';
      	label5.text="Map: "+e.map;
      	label6.color = 'red';
      	label6.text="Annotation: Title: Subtitle: "+e.annotation+" "+e.title+" "+e.subtitle;
      	label7.color = 'red';
      	label7.text="Lat & Lon:"+e.latitude+" "+e.longitude;
      	
      	
      	//change the text color
      	setTimeout(function()
      			{
      				label3.color = '#444';
      				label4.color = '#444';
      				label5.color = '#444';
      				label6.color = '#444';
      				label7.color = '#444';
      			},100);
      });
       
      // add the labels and texfields to the window
      stuffView.add(label1);
      stuffView.add(label2);
      stuffView.add(label3);
      stuffView.add(label4);
      stuffView.add(label5);
      stuffView.add(label6);
      stuffView.add(label7);
       
      win.add(stuffView);
      win.add(button);
       
      //add the map
      win.add(map);
      win.open();
      

      Steps to reproduce:
      1) Use sample code above in your pre-configured app with Google map API v2 key
      2) Click a pin - note it is selected and the event listener fires
      3) Click the same pin again - note it is deselected but the listener doesn't fire
      4) Click the same pin again

      Result:
      Nothing happens. The pin is not selected, the listener doesn't fire.

      Expected:
      The listener fires and the pin is selected.

        Attachments

          Activity

            People

            • Assignee:
              hpham Hieu Pham
              Reporter:
              emerriman Eric Merriman
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-15724
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration