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.
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.
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.