8 Answers

• Add your custom attribute to the annotation

  
  var atlanta = Titanium.Map.createAnnotation({
      latitude:33.74511,
      longitude:-84.38993,
      title:"Atlanta, GA",
      subtitle:'Atlanta Braves Stadium',
      pincolor:Titanium.Map.ANNOTATION_PURPLE,
      animate:true,
      leftButton:'../images/atlanta.jpg',
      rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
      url:'http://www.google.com' // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS    
  });
  

  then the eventListener is added to the mapview, not directly to the annotation.

  
  mapview.addEventListener('click',function(evt)
  {
      // map event properties 
      var annotation = evt.annotation;
      var title = evt.title;
      var clickSource = evt.clicksource;
  
  
  
      Titanium.API.info('MAPVIEW EVENT - you clicked on '+title+' with click source = '+clickSource);
  
  if (clickSource == 'rightButton'){
  
  // get custom annotation attribute
      var url = evt.annotation.url;
  // code to open your url
  }
  
  });
  

• I found Nick Lloyd's code quite helpful. Immediately after his comment

  // code to open your url
  

  I added this –

  var button = Titanium.UI.createButton({
          title:'Back',
          style:Titanium.UI.iPhone.SystemButtonStyle.DONE
      });
  
  button.addEventListener('click', function() {
          window.close();
      });
  
  var webview = Titanium.UI.createWebView({url:evt.annotation.url});
  var window = Titanium.UI.createWindow();
  window.add(webview);
  window.setLeftNavButton(button);
  window.open({modal:true});
  

  Now, when the rightButton is clicked, a webview pops up showing the URL evt.annotation.url (defined in the annotion as url:'http://somewebsite.com' as Nick demonstrated above). The webview includes a "Back" button that can be pressed/clicked to close the window containing the webview, bringing the user back to the mapview. Instead of all this, if you're not trying to keep the user focused on your app's content, a simple

  Titanium.Platform.openURL(evt.annotation.url);
  

  will do, opening up Safari and closing the app. Hope this helps!

• I also want the same thing. When I googled I found this link and I start trying on these solutions. Later I found an excellent solution in appcelerator documentation. The link is

  https://developer.appcelerator.com/apidoc/mobile/1.8.2/Titanium.Map-module
  
  The code is
  
  var mountainView = Titanium.Map.createAnnotation({
      latitude:37.390749,
      longitude:-122.081651,
      title:"Appcelerator Headquarters",
      subtitle:'Mountain View, CA',
      pincolor:Titanium.Map.ANNOTATION_RED,
      animate:true,
      leftButton: '../images/appcelerator_small.png',
      myid:1 // Custom property to uniquely identify this annotation.
  });
  
  var mapview = Titanium.Map.createView({
      mapType: Titanium.Map.STANDARD_TYPE,
      region: {latitude:33.74511, longitude:-84.38993, 
              latitudeDelta:0.01, longitudeDelta:0.01},
      animate:true,
      regionFit:true,
      userLocation:true,
      annotations:[mountainView]
  });
  
  win.add(mapview);
  // Handle click events on any annotations on this map.
  mapview.addEventListener('click', function(evt) {
  
      Ti.API.info("Annotation " + evt.title + " clicked, id: " + evt.annotation.myid);
  
      // Check for all of the possible names that clicksouce
      // can report for the left button/view.
      if (evt.clicksource == 'leftButton' || evt.clicksource == 'leftPane' ||
          evt.clicksource == 'leftView') {
          Ti.API.info("Annotation " + evt.title + ", left button clicked.");
      }
  });
  

• Thank you for your idea. When I try it, I get this result:

  1. I click on the annotation marker: the event is not fired, but the annotation tooltip is displayed
  2. I click on the annotation tooltip: the event is fired, but annotation is undefined

  Here is my code

  mapview.addEventListener('click',function(evt) {
    var annotation = evt.annotation;
    Titanium.API.debug('annotation clicked');
    Titanium.API.debug(evt.annotation.latitude + ' ' + evt.annotation.longitude);
  });
  

  And the result:

  [DEBUG] [2063,155311] annotation clicked
  [TRACE] E/KrollCallback( 228): (kroll$2) [23,155334] ERROR: TypeError: Cannot read property "latitude" from undefined
  [TRACE] E/KrollCallback( 228): org.mozilla.javascript.EcmaError: TypeError: Cannot read property "latitude" from undefined
  

• To be honest I'm not sure you can tie the eventListener to the 'pin' itself.

  What happens if you try adding the latitude & longitude as addition custom attributes? (with diff names)

• Same result… I can't retrieve the annotation object. It is undefined.

• Adding a URL on a subtitle will not work, i've also expirimented with that. What does work is creating a left/right button and redirect from a URL from there.

• Glenn Tillemans > how do you add a button in an annotation? I've tried this, that doesn't work…

  var my_button = Titanium.UI.createButton({
    title: 'Click me!'
  });
  
  annotation = Titanium.Map.createAnnotation({
    latitude: 12.34,
    longitude: 12.34,
    // ...
    rightButton: my_button
  });