user869935 user869935 - 5 months ago 59x
Javascript Question

How do you show a window when clicking polygons in angular google maps?

Whenever one of the regions on the map are clicked, it should open the window for that region, but it doesn't.

The expected results would be as follows:

Here is how I want it to look.

Here is my html:

<ui-gmap-polygon static="true" ng-repeat="p in regions track by" path="p.path" visible="p.visible" stroke="p.stroke" fill="p.fill" events="events" clickable="true" >
<ui-gmap-windows models="markers" show="show">
<!-- Window Code -->

Here is the $ function for the polygons:

for(var i = 0; i < $scope.markers.length; i++) {
//console.log(model.path[0].id + " == " + $scope.markers[i].id);
if(model.path[0].id == $scope.markers[i].id) {
console.log("Showing window " + model.path[0].id);
$scope.markers[i].show = true;
{ // hides other windows
$scope.markers[i].show = false;

Something to note. The log statement does show up, just not the window.
Here is a plunker: Plunker


I figured out an alternative solution to the problem. Instead of using a window for every marker, I used just one:

<ui-gmap-window coords="selected" show="windowShown" closeClick="closeClick()">
        <!-- Window Code -->

Then in the controller we have a similar click function:

  Events when clicking on a polygon.
  $ = {
    click: function(polygon, eventName, model) {
      // show the window
      for(var i = 0; i < $scope.markers.length; i++) {
        if(model.path[0].id == $scope.markers[i].id) {
          $scope.selected = $scope.markers[i];
          $scope.windowShow = true;

Lastly, we have a closeClick function to make sure $scope.windowShown is set to false after the window is closed. Otherwise, you cannot reopen the window on the same polygon after it has been closed.

$scope.closeClick = function() { $scope.windowShow = false; }