javascriptgoogle-mapsdom-eventssenchatouch-2.4

Sencha touch 2: add a button on Google maps info window


I am trying to add a link or a button on a Google maps info window (https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple) and handle the 'tap' event with my sencha touch controller. My code is not working. Basically what I'm trying to do is to fire an event with native Javascript and listen to it into my controller.

enter image description here

Here I add the infowindow on the marker:

        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 function in my index.html, it runs without any exception:

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

Event handler in my controller (it's never called)

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

Only one info window is displayed at a time.


Solution

  • Here's a clean solution:

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

    The function on fireEvent index.html is not required anymore.