AngularJS ng-click inside of Google Maps InfoWindow

Question

Following this issue: AngularJS ng-include inside of Google Maps InfoWindow?

The solution provided working great, but I found one issue when adding ng-click into the template, it doesn't get evaluated.

<script type="text/ng-template" id="/test.html">  
   <h4>{{latLng[0]}},{{latLng[1]}}</h4>   
   <button ng-click="clickMe()"/>click</button>
 </script>

clickMe just test function inside controller,

$scope.clickMe = function(){
  alert("clicked");
}

additional info: ng-hide is evaluated just fine:

<script type="text/ng-template" id="/test.html">  
  <h4>{{latLng[0]}},{{latLng[1]}}</h4>   
  <button ng-hide="true" ng-click="clickMe()"/>click</button>
</script>

any help would be great, thanks heaps, been couple days scratching my head, with no result.

Regards Jim

Your issue might also be scope. To help narrow down the problem, set `ng-hide="foo"` and set `ng-click="foo=!foo"`. If the button disappears when clicked, ngClick is working. — Jakob Jingleheimer, Sep 13 '13 at 03:41
OHHH! Just noticed the `google-maps` tag on your question. The GoogleMaps api is a huge pain to work with on its own and even more troublesome with Angular. Try sticking an ng-transclude on there. If the attribute doesn't work, you'll have to write a custom directive and call [`$scope.$compile()`](http://docs.angularjs.org/api/ng.$compile) on your template before injecting it into the DOM. — Jakob Jingleheimer, Sep 13 '13 at 17:17
Thanks Jacob, I have compiled the the template before injecting it into DOM, everything worked except the ng-click doesn't get binded properly. — Ju Kom, Sep 15 '13 at 22:30
Hmm, in that case I'll need some code to look at. Please set up a jsfiddle or better yet a plunkr. — Jakob Jingleheimer, Sep 16 '13 at 00:37

score 8 · Answer 1 · answered Sep 21 '13 at 12:15

8

The problem is, that you insert innerHTML not the compiled tag as content of the infoWindow. So your code is evaluated once and you pass only this compiled static content. Please try to use infoWindow.setContent(compiled[0]) instead of infoWindow.setContent(compiled[0].innerHTML)

answered Sep 21 '13 at 12:15

theres

523
4
13

it is breaking style of infoWindow after compiled[0]? – Pankaj Parkar Jan 16 '15 at 20:17

score 0 · Answer 2 · answered Jan 16 '17 at 20:32

I had exactly this problem and wanted to share my solution, please understand this is a specific use case workaround and requires re-routing the user which may not work at all in your scenario.

What I did was first pass parameters into the each marker object that I needed, so they would be accessible in the info window via this. Then I removed the ng-click and instead used an a tag with an href to a route as well as the parameters I needed in my since removed ng-click. Here is the code bits:

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        id: myParam1
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent('<div id="content">'+
        '<a href="/site#/alinkroute?id='+this.myParam1+'">A ref to new template</a><br>'+
        '</div>'
      );
      infowindow.open(map, this);
    });

Then I have routeProvider provide a route to a standard template at this address in which I have a ng-init that calls my ng-click with no parameters. In my ng-click I use standard javascript to parse the url for parameters and I get the values I need for my ng-click.

I'm intrigued if this helps anyone.

AngularJS ng-click inside of Google Maps InfoWindow

2 Answers2