Конфигурация угловых google-карт с ионной каркасом

Я начал работу с ионным приложением, и одна из особенностей кросс-платформенного плеча - это интеграция карты Google api. В настоящее время я выбираю angular-google-maps Конфигурация угловых google-карт с ионной каркасом

Теперь я пытаюсь сконфигурировать его с ионными, как это:

кажется Eveything хорошо, но почему она dosen't работать?

<html ng-app="appMaps"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Map</title> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 
    <script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"></script> 
    <script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> 

    </head> 
    <body> 
    <ion-header-bar class="bar-dark" > 
     <h1 class="title">Google Maps Example</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div id="map_canvas" ng-controller="mainCtrl"> 
     <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"></ui-gmap-google-map> 
     </div> 
    </ion-content> 

    <SCRIPT> 
    angular.module('appMaps', ['uiGmapgoogle-maps','ionic']) 
    .controller('mainCtrl', function($scope) { 
     $scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 }; 
     $scope.options = {scrollwheel: false}; 
    }); 
    </SCRIPT> 
    </body> 
</html>

источник

2016-01-11 partiz

Вы пропустили некоторые вещи:

ссылка на угловой простодушные logger.js (угловой Google-Maps имеет зависимость)
высоту CSS для углового-гугле -map-контейнер (см http://angular-ui.github.io/angular-google-maps/#!/use пуля номер 7)
преобразовать raw.github.com к rawgit.com при компоновке Direc в JS-библиотеки на GitHub.

Вот рабочий фрагмент кода:

<html ng-app="appMaps"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Map</title> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
    <script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script> 
 
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 
 
    <script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
    <script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> 
 
    <style> 
 
    #map_canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.angular-google-map-container { height: 400px; } 
 
    
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ion-header-bar class="bar-dark"> 
 
    <h1 class="title">Google Maps Example</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
    <div id="map_canvas" ng-controller="mainCtrl"> 
 
     <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map> 
 
    </div> 
 
    </ion-content> 
 

 
    <SCRIPT> 
 
    angular.module('appMaps', ['uiGmapgoogle-maps', 'ionic']) 
 
     .controller('mainCtrl', function($scope) { 
 
     $scope.map = { 
 
      center: { 
 
      latitude: 51.219053, 
 
      longitude: 4.404418 
 
      }, 
 
      zoom: 14, 
 
      options: { 
 
      scrollwheel: false 
 
      } 
 
     }; 
 
     }); 
 
    </SCRIPT> 
 
</body> 
 

 
</html>

источник

2016-01-11 13:02:19 beaver

Конфигурация угловых google-карт с ионной каркасом

ответ

Смежные вопросы