Google Maps and infowindows

1

Hi all, I’m using angular-google-maps (http://angular-ui.github.io/angular-google-maps/#) to show a map into my app. My problem is that when user click on a marker the infowindow is showed and close instantly and he needs to reclick on marker to see it (the marker remain open).

This is my HTML code:

<ui-gmap-google-map set-height center='map.center' zoom='map.zoom' data-tap-disabled="true">

            <ui-gmap-markers models="locations" coords="'self'">
                <ui-gmap-windows show="show">
                    <div ng-non-bindable>
                        <a href="">{{::title}}</a><br>
                        <img class="markerImg" src="{{::field_immagini}}">
                            <br><br>
                            <a href="#/tab/location/{{::id}}">Vai alla scheda</a>
                    </div>
                </ui-gmap-windows>
            </ui-gmap-markers>
        </ui-gmap-google-map>

and “locations” is defined in the relative Ctrl:

$scope.map = { center: { latitude: 41.9, longitude: 12.4833333 }, zoom: 5 };

$scope.locations = $localstorage.getObject('locations');
angular.forEach($scope.locations,function(v,k) {
    $scope.locations[k].id = k;
    $scope.locations[k].longitude = $scope.locations[k].locationsZB.coordinates[0];
    $scope.locations[k].latitude = $scope.locations[k].locationsZB.coordinates[1];
    $scope.locations[k].icon = $scope.locations[k].field_immagini;
    $scope.locations[k].show = false;
    $scope.locations[k].onClick = function() {
        console.log("Clicked!");
        $scope.locations[k].show = !$scope.locations[k].show;
    };

});

Thanks in advance.

M.

2

I’ve been using https://github.com/allenhwkim/angularjs-google-maps and have had no issues with the infowindows. Maybe it might be worth using this library instead?

Here is a snippet to give you a reference point.

  <marker position="[{{zone.lat}},{{zone.lng}}]"
          on-click="showInfoWindow('foo')"
          ng-repeat="zone in allZones | filter: zone.unlocked"
          icon="img/marker-locked.svg"
          shadow-style="0"
          background-color="rgb(255,255,255)">
    <info-window id="foo" class="infowindow-zones">
      <div ng-non-bindable="">
        <h4 class="marker-headline">{{ zone.name }}</h4>
        <h6 class="marker-subheadline">{{ zone.type }}</h6>
        <p class="marker-price">{{ zone.price | currency }}</p>
        <div class="marker-details">
          <a href="#" class="btn-block btn-assertive" ng-click="selectZone($index)">View Zone</a>
        </div>
      </div>
    </info-window>
  </marker>
3

Thanks, I wiil try it. M.