Hi @warbadev,
Didn’t get a chance to look at your code. I am using @Brock01 code with my modifications.
controller.js:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope, $timeout, $ionicModal) {
$scope.items = [{
"id": "Item One",
"point_lat": "51.26278276402000",
"point_lng": "4.41978687426830",
"code": "10"
}, {
"id": "Item Two",
"point_lat": "51.19422807197800",
"point_lng": "4.43719657638180",
"code": "20"
}, {
"id": "Item Three",
"point_lat": "51.21825905664000",
"point_lng": "4.37095593221650",
"code": "30"
}];
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);
$scope.itemCode = item.code;
console.log($scope.itemCode);
// make map-element
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
console.log($scope.map);
// 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,
break;
}
}
// 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;
};
// Create the modal
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.modal = $ionicModal;
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
$scope.openModal = function(id) {
$scope.id = id;
console.log($scope.id);
if($scope.id){
$scope.modal.show();
$scope.toggleGroup($scope.id);
}
}
});
modal.html:
<ion-modal-view>
<ion-header-bar class="bar bar-header">
<h1 class="title">Map Modal</h1>
<button class="button button-icon button-clear ion-android-close" ng-click="modal.hide()" style="padding-left:10px;padding-bottom:10px"></button>
</ion-header-bar>
<ion-content class="padding">
<div class='parkmap' id="map"></div>
</ion-content>
</ion-modal-view>
tab-dash.html:
<ion-view title="Dashboard">
<ion-content class="has-header padding">
<ion-list ng-repeat="item in items">
<ion-item ng-click="openModal(item.id)">
{{ item.id }}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
style.css:
.parkmap{
height: 300px;
width: 100%;
max-width: none;
}
Hope it helps you.
