1
Я пытаюсь использовать google maps api для отображения карты адреса, который я передал из набора данных json, однако, когда я запускаю код, он отображает только первый адрес который попадает в него. Когда модаль открыт, он отображает карту, но как только он закрыт и открывается другой, он не отображает карту вообще как раз пустое место.Карты Google в модальном отображает только первую карту
модальный контроллер
.controller('ModalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function(b,c) {
$scope.modal.show();
var myLatlng = new google.maps.LatLng(b,c);
var mapProp = {
center: myLatlng,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
$scope.map = map;
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
})
Модальные
<ion-modal-view>
<ion-header-bar id="modalheader">
<h1 class="title"></h1>
<!-- button to close the modal -->
<button class="button icon ion-android-close" ng-click="closeModal();"></button>
</ion-header-bar>
<ion-content class="item-icon-right item-text-wrap" id="modal">
<ion-list id="modalitem">
<ion-item>
<!-- displays the larger view of the office address -->
<h1>{{office.LocationName}}</h1>
<p id="mdets">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</ion-list>
<!-- creates the map view from the json data -->
<div data-tap-disable="true" draggable="false">
<div id="map" style="width:100%; height:380px;"></div>
</div>
</ion-content>
</ion-modal-view>
Page, где модальный может быть открыт.
<ion-view view-title="Favourites">
<!-- template for the favourites page -->
<ion-content>
<ion-list>
<!-- displays the items that the user has favourited through the filter function -->
<ion-item id="fav" class="item-icon-right item-text-wrap" collection-repeat="office in offices|filter:ifinfav1" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long); lastview(office.id);">
<h3>{{office.LocationName}}</h3>
<p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>