GoogleMaps doesn't appear when Angular ui-router($stateProvider) is used

Question

I have three states in my simple ionic project. I want to add a map to home page after logged in. When I tried to add a map in map.html file which is a template file, it appears when map.html opened via browser. However, when I try to reach this state(map.html) by using $stateProvider the map does not appear.

My map.html file is :

    <!DOCTYPE html>
<html ng-app="starter">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

      <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }
    </style>      
  </head>

 <body ng-controller="mapctrl">
    <ion-header-bar class="bar-dark"> <h1 class="title">Home Page</h1></ion-header-bar>
     <ion-view>
         <div id="map" ng-init="initMap()"></div>
         <button ng-click="goOther()" class="button button-block button-dark">For more detail please click!</button>
     </ion-view>
    </body>
</html>

My app.js is :

var app =angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $stateProvider
    .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginctrl'
    })
    .state('map',{
        url:'/map',
        templateUrl:'templates/map.html',
        controller:'mapctrl'
    })
    .state('other',{
        url:'/other',
        templateUrl:'templates/other.html',
        controller:'otherctrl'
    })

     $urlRouterProvider.otherwise('/login');
}])

app.controller('loginctrl',function($scope,$state){
    $scope.goMap = function(){$state.go('map');};
})

app.controller('mapctrl',function($scope,$state){
    $scope.goOther = function(){
        $state.go('other');};

      $scope.initMap = function () {
      console.log("deneme");
        var myLatlng = new google.maps.LatLng(51.5120, -0.12);
        var mapOptions = {
            zoom: 14,
            center: myLatlng
                }
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center);
        });
    };
})


app.controller('otherctrl',function($scope,$state){
    $scope.goLogin = function(){$state.go('login');};
});

I've also tried to add the map directly in map.html file but it doesn't appear,either.

Thanks in advance.

Answer 1

Google Maps仅适用于Chrome中的https ，并且与$ stateProvider可能没有任何依赖关系

GoogleMaps doesn't appear when Angular ui-router($stateProvider) is used

Question

1 answers

solution1
0 2016-07-19 12:21:31

GoogleMaps doesn't appear when Angular ui-router($stateProvider) is used

Question

1 answers

solution1 0 2016-07-19 12:21:31

solution1
0 2016-07-19 12:21:31