Sencha touch 2: добавить кнопку в информационном окне Google Maps

Question

Я пытаюсь добавить ссылку или кнопку в информационном окне карт Google ( https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple) и обработать событие "tap" с помощью сенсорного ввода sencha контроллер. Мой код не работает. В основном то, что я пытаюсь сделать, это запустить событие с использованием встроенного javascript и прослушать его в моем контроллере.

Здесь я добавляю информационное окно на маркер:

        google.maps.event.addListener(marker, 'click', function() {

                    me.selectedMarker = marker;

                    // info window
                    var contentString = "'<div id='content'>"
                            + "<h1 id='firstHeading'>{0}</h1>"
                            + "<div id='bodyContent'>{1}</div>" +
                                    "<div id='detailLink' onClick=\"fireEvent(this, 'tap')\" style='text-decoration: underline'>" +
                                    "TAP ME TO OPEN THE DETAIL" +
                                    "</div>" +
                                    "</div>"

                    contentString = contentString.format(punto.label, punto.descBreve);

                    if (me.infowindow) {
                        me.infowindow.close();
                    }

                    me.infowindow = new google.maps.InfoWindow({
                                content : contentString
                            });

                    me.infowindow.open(me.getMap(), marker);

                });

Функция fireEvent в моем index.html, она работает без каких-либо исключений

function fireEvent(element, event) {

    if (document.createEventObject) {
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + event, evt)
    } else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

Обработчик событий в моем контроллере (он никогда не вызывается)

    control : {
        '#detailLink' : {
            tap : function(){ alert('tapped')},
            click : function(){ alert('clicked')}
        }
    }

Только одно информационное окно отображается одновременно.

Answer 1

Вот чистое решение:

google.maps.event.addListener(marker, 'click', function() {


            var contentString = "'<div id='content'>"
                    + "<h1 id='firstHeading'>{0}</h1>"
                    + "<div id='bodyContent'>{1}</div>"
                    // + "<div id='detailLink' onClick=\"fireEvent(this, 'tap')\" style='text-decoration: underline; padding : 6px'>"
                    + "<div id='detailLink' style='text-decoration: underline; padding : 6px'>"
                    + "TAP ME TO OPEN THE DETAIL" + "</div>" + "</div>"

            contentString = contentString.format(punto.label,
                    punto.descBreve);

            if (me.infowindow) {
                me.infowindow.close();
            }

            me.infowindow = new google.maps.InfoWindow({
                        content : contentString
                    });

            me.infowindow.open(me.getMap(), marker);

            // short delay
            setTimeout(function() {
                        var iw = Ext.get('detailLink');
                        iw.addListener({
                                    tap : function() {
                                        // do what you need
                                    }
                                });
                    }, 100);

        });

Функция в fireEvent index.html больше не требуется.