google-maps-api-3infowindowinfobubble

How to set dynamic content for InfoBubble using AngularJS?


I use AngularJS. I want to present an InfoBubble with dynamic content and some functions of AngularJS like ng-click, ng-mouseover. Using InfoWindows I had to compile html first and then set the compiled html as the content of the InfoWindows. Unfortunately, this is not working for InfoBubbles. When I add static html it has no problem, but when I add the compiled html it seems to have nothing as content.

var htmlElement = '<div ng-include="\'/home/include/infoBubble.html\'"></div>'
var compiled = $compile(htmlElement)($scope)
infoWindow = new InfoBubble({
        content: compiled[0],
        shadowStyle: 1,
        padding: 0,
        backgroundColor: 'rgb(57,57,57)',
        borderRadius: 4,
        arrowSize: 10,
        borderWidth: 1,
        borderColor: '#2c2c2c',
        disableAutoPan: true,
        hideCloseButton: true,
        arrowPosition: 30,
        backgroundClassName: 'phoney',
        arrowStyle: 2
    });
 infoWindow.open(vm.map, marker);

Solution

  • The problem was that I had no max and min heights and widths. Setting those solved the problem.