Ng-click in Google maps InfoWindow

1

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>';
          
    infoWindow.open(map,marker);
    infoWindow.setContent(content);

    $.scope.test = function(){
    
    alert('test');
    
    }

Your help will be much appreciated
Thanks
Donovan

2

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

3

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.

4

I’ve cleaned out the nightly map codepen and added some comments where I went wrong. Hope it helps http://codepen.io/DonnyCrash/pen/zxoqdO

1 Like
5

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: new.google.maps.LatLng(lat, lng),
    map:      map,
    content: compiled[0]
});

google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.content);
        infowindow.open(map, marker);
        map.setCenter(this.position);
 });

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
6

how can I use the $compile in ionic 2 ?

3 Likes
7

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’, () => {
alert(‘Clicked’);
});
});

3 Likes
8

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

1 Like