MapView custom annotation view.

app.js

var win = Ti.UI.createWindow();
win.open();

var latitude = 37;
var longitude = -122;
var pinImage = 'map-pin.png';
var selectedPinImage = 'map-pin-selected.png';
var selectedPin = null;

var contentView = Ti.UI.createView({
    top:0,
    width:200,
    height:200,
    borderRadius:20,
    backgroundColor:"#000"
});

var closeBtn = Ti.UI.createButton({
    backgroundImage:"/close.png",
    top:5,
    right:5,
    height:30,
    width:30
});

var arrowView = Ti.UI.createView({
    bottom:0,
    height:20,
    width:20,
    backgroundImage:"/arrow.png"
});

var popView = Ti.UI.createView({
    height:220,
    width:200,
    visible:false,
    opacity:0.0
});
contentView.add(closeBtn);
popView.add(contentView, arrowView);

var pin1 = Titanium.Map.createAnnotation({
    latitude:latitude,
    longitude:longitude,
    title:"Appcelerator Headquarters",
    subtitle:'Mountain View, CA',
    pincolor:Titanium.Map.ANNOTATION_RED,
    animate:true,
    image: pinImage,
    pinImage:pinImage,
    selectPinImage:selectedPinImage
});     
 
var pin2 = Titanium.Map.createAnnotation({
    latitude: 31.390749,
    longitude:-121.081651,
    title:"Other one",
    subtitle:'Mountain View, CA',
    pincolor: Titanium.Map.ANNOTATION_RED,
    animate:true,
    image: pinImage,
    pinImage:pinImage,
    selectPinImage:selectedPinImage
});     
 
var pin3 = Titanium.Map.createAnnotation({
    latitude: 30.390749,
    longitude:-122.081651,
    title:"Other one",
    subtitle:'Mountain View, CA',
    pincolor: Titanium.Map.ANNOTATION_RED,
    animate:true,
    image: pinImage,
    pinImage:pinImage,
    selectPinImage:selectedPinImage
});     
 
var mapView = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    animate:true,
    region:{latitude:latitude, longitude:longitude, latitudeDelta:0.1, longitudeDelta:0.1},
    regionFit:true,
    userLocation: false,
    annotations: [pin1, pin2, pin3]
}); 

win.add(mapView);
win.add(popView);

mapView.addEventListener('regionchanged', function(evt){
    evt.source.setRegion(evt)
});

mapView.addEventListener('click', function(evt) {
   
    if(evt.clicksource === 'pin' && evt.annotation !=selectedPin){
        evt.source.deselectAnnotation(evt.annotation); 
        showPopView(evt);
        evt.annotation.setImage(evt.annotation.selectPinImage);
        if(selectedPin){
            selectedPin.setImage(selectedPin.pinImage);
            selectedPin = evt.annotation;
        } else {
            selectedPin = evt.annotation;
        }
    } 
    evt.source.deselectAnnotation(evt.annotation); 
    
});

closeBtn.addEventListener('click', closePopView);

function closePopView(evt){
    mapView.removeEventListener('regionchanged', movePopView);   
    popView.hide();
    selectedPin.setImage(selectedPin.pinImage);
    selectedPin = null;
}

function movePopView(evt){
    if(selectedPin){
        var point = convertMapPoints({
            map:evt.source,
            annotation:selectedPin,
            view:win
        });
        popView.center ={x:point.x, y:(point.y-(popView.height/2)-20)};
    }
}

function showPopView(evt){
    
    mapView.addEventListener('regionchanged', movePopView);

    var point = convertMapPoints({
        map:evt.source,
        annotation:evt.annotation?evt.annotation:selectedPin,
        view:win
    });
    popView.center ={x:point.x, y:(point.y-(popView.height/2)-20)};
    popView.show();
    popView.animate({opacity:1.0, duration:250});
}

function convertMapPoints(e){
    var region = e.map.region, 
        pin = e.annotation,
        width = e.map.size.width,
        height = e.map.size.height,
        bounds = {},
        cView = Ti.UI.createView({touchEnabled:false});
    
    e.map.add(cView);

    bounds.north = parseFloat(region.latitude) + parseFloat(region.latitudeDelta) / 2.0;
 
    bounds.west = parseFloat(region.longitude) - parseFloat(region.longitudeDelta) / 2.0;
 
    bounds.east = parseFloat(region.longitude) + parseFloat(region.longitudeDelta) / 2.0;
 
    bounds.south = parseFloat(region.latitude) - parseFloat(region.latitudeDelta) / 2.0;
    
    if(bounds.north>bounds.south){
        var hSize = ( bounds.north - bounds.south ) / height;
        var y = Math.round(( bounds.north-pin.latitude)/hSize);
    } else {
        var hSize = ( bounds.south - bounds.north ) / height;
        var y = Math.round(( pin.latitude-bounds.north )/hSize);
    }
    
    if(bounds.west>bounds.east){
        var wSize = ( bounds.west - bounds.east ) / width;
        var x = Math.round(( pin.longitude - bounds.east )/wSize);
    } else {
        var wSize = ( bounds.east - bounds.west ) / width;
        var x = Math.round(( pin.longitude - bounds.west )/wSize);
    }
    
    var point = cView.convertPointToView({x:x, y:y}, e.view);
    
    e.map.remove(cView);
    
    cView = null;
    if(e.callback){
        callback(point)
    } else {
        return point;
    }  
};