Ng-click in Google maps InfoWindow

Hi there, I’m new to ionic and absolutely loving it. I have however got an issue that I would like assistance with. I currently have a Google Map which is working perfectly but I would like to add a ng-click listener on a button in the infowindow. I’ve read around and found that because the info window is not in the DOM yet I should $compile it first? Does Ionic support $compile as I keep getting an undefined var error.

This is what I currently have:

var content = '<button class="button button-outline button-positive" ng-click="test()">Test</button>';

    $.scope.test = function(){

Your help will be much appreciated

Sorry, Figured it out… forgot to inject $compile into my controller

Having the same issue setting this up as well. I have tried using $compile on the button but still having issues. Would you mind posting your working code, so we can see your solution? Thanks.

I’ve cleaned out the nightly map codepen and added some comments where I went wrong. Hope it helps

1 Like

Thanks for sharing that. So it turns out I was using similar code with one difference. I will post that here in case in someone else comes across the same issue. I was trying to use this syntax for creating the infowindow.

var infowindow = new google.maps.InfoWindow();

var compiled = $compile('<button ng-click="navigate(' + lat + ',' + lng +')">Navigate</button>')($scope);
var marker = new google.maps.Marker({
    position:, lng),
    map:      map,
    content: compiled[0]

google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.content);, marker);

So using infowindow.setContent() would just create a infowindow with content like [HTMLButtonElement]. I went back to setting the content in when instantiating the infowindow, and it worked perfectly like your code pen. In summary, it doesn’t appear you can use $compile to render content and set it using infowindow.setContent().

var infowindow = new google.maps.InfoWindow({ content: compiled[0]}); // This works
infowindow.setContent(compiled[0]);  // Does NOT work

how can I use the $compile in ionic 2 ?


I have used this and its working in Ionic 2:

let infoWindow = new google.maps.InfoWindow({
content : <p id = "myid">Click</p>
google.maps.event.addListenerOnce(infoWindow, ‘domready’, () => {
document.getElementById(‘myid’).addEventListener(‘click’, () => {


@biranchi125 You’re the best. This worked for me.

1 Like