javascript - GoogleMaps doesn't appear when Angular ui-router($stateProvider) is used -
i have 3 states in simple ionic project. want add map home page after logged in. when tried add map in map.html file template file, appears when map.html opened via browser. however, when try reach state(map.html) using $stateprovider map not appear.
my map.html file :
<!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> <!-- 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 :
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 tried add map directly in map.html file doesn't appear,either.
thanks in advance.
google maps works https in chrome , may not have dependency $stateprovider
Comments
Post a Comment