[solved] Multiple Google Maps (v3) inside ion-item with ng-repeat and ng-show

2

Hi @Brock01,
It was always displaying but in item 1. Some of you code was a bit weird. Your $timeout is always not a function (Not sure what the timeout is for).

Here is my tweaked version:
controller:

.controller('MainController', ['$scope', function($scope, $timeout) {

  $scope.items = [{"id":"Item One","point_lat":"51.26278276402000","point_lng":"4.41978687426830"},{"id":"Item Two","point_lat":"51.19422807197800","point_lng":"4.43719657638180"},{"id":"Item Three","point_lat":"51.21825905664000","point_lng":"4.37095593221650"}];
  var mapOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } 
    else {
      $scope.shownGroup = group;
      for(var i = 0; i < $scope.items.length; i++){
        var item = $scope.items[i];
        // search for opened item in the array of items
        if(item.id == group){ // found item
          // make latitude-longitude element
          var myLatlng = new google.maps.LatLng(item.point_lat, item.point_lng);

          // make map-element
          $scope.map = new google.maps.Map(document.getElementById('map' + item.id), mapOptions);
          
          // make marker-element
          var marker = new google.maps.Marker({
            position: myLatlng,
            map: $scope.map
          });
          
          // resize map now
          google.maps.event.trigger($scope.map, 'resize');
          $scope.map.setCenter(myLatlng);
          $scope.map.setZoom( $scope.map.getZoom() );
          
          // resize map when map is idle.
          google.maps.event.addListenerOnce($scope.map, 'idle', function() {
            console.log("map idled, resizing");
            google.maps.event.trigger($scope.map, 'resize');
            $scope.map.setCenter(myLatlng);
            $scope.map.setZoom( $scope.map.getZoom() );
          }); // shouldn't be making a function inside a loop but F it i'm trying everything, 
        }
      }
      // resize map on time out (5 seconds)
      $timeout(function(){
        console.log("timeout, resizing");
        google.maps.event.trigger($scope.map, "resize");
        $scope.map.setCenter(myLatlng);
        $scope.map.setZoom( $scope.map.getZoom() );
      }, 5000);
    }
  }

  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

}]);

index.html:

//In Head    
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

<body ng-app="starter" ng-controller="MainController">
    <ion-list ng-repeat="item in items">
      <ion-item  class="text-center item-accordion item-icon-left item-header" ng-click="toggleGroup('{{item.id}}')">
        {{ item.id }}
      </ion-item>
      <ion-item class="item-accordion item-text-wrap" ng-show="isGroupShown('{{item.id}}')">
        <div class='parkmap' id='map{{item.id}}'></div>
      </ion-item>
    </ion-list>
  </body>

style.css:

.parkmap{
	height:300px;
}

Hope all works fine for you.