config angular-google-maps with ionic-framework

问题

I have started an ionic app for work, and one of the features of the cross platform arm is integrating a a Google map api. Currently I choose angular-google-maps

Now I try config it with ionic like this:

seems eveything is ok but why it dosen't work?

<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>

回答1:

You missed some stuff:

the link to angular-simple-logger.js (angular-google-maps has a dependency)
the CSS height for angular-google-map-container (see http://angular-ui.github.io/angular-google-maps/#!/use bullet number 7)
to convert raw.github.com to rawgit.com when linking directly to JS libraries on GitHub.

Here is the working snippet:

<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>

来源：https://stackoverflow.com/questions/34719011/config-angular-google-maps-with-ionic-framework

标签

angularjs

google-maps

ionic

angular-google-maps