eckig-google-maps keine api-Tasten

Ich hatte Probleme mit meiner App und bekam die Warnung "Kein API-Schlüssel". Ich habe diese .config:eckig-google-maps keine api-Tasten

.config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) { 
    GoogleMapApi.configure({ 
    key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g', 
    v: '3', 
    libraries: 'weather,geometry,visualization' 
    }); 
    }])

Dies machte die Warnung verschwunden, aber ich bin immer noch eine leere Seite für meine App statt Google Maps zu bekommen. Ich werde auch keine Warnung bekommen, also kann ich nicht herausfinden, was falsch ist, aber ich denke, es muss damit zu tun haben, dass der API-Schlüssel nicht durchkommt. Ich verwende dieses Repo: https://github.com/angular-ui/angular-google-maps. Hier

ist die Web-Seite: http://alainwebdesign.ca/pl4/

Voll JS-Datei, wo ich einen Fehler gemacht haben kann:

(function (window, ng) { 
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router']) 



    .config(function ($stateProvider) { 
     $stateProvider.state('location', { 
      url: '/:lat/:lon', 
      templateUrl: 'index.html', 
      controller: 'MapsCtrl', 
      resolve: { 
       resolveMap: function (MapService, $stateParams) { 
        return MapService.getData($stateParams.lat, $stateParams.lon); 
       } 
      } 
     }); 

    }) 

    .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) { 
    GoogleMapApi.configure({ 
    key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g', 
    v: '3', 
    libraries: 'weather,geometry,visualization' 
    }); 
    }]) 


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 
     function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) { 
      $log.currentLevel = $log.LEVELS.debug; 
      var center = { latitude: $stateParams.lat, longitude: $stateParams.lon }; 
      alert(center) 
      Object.freeze(center); 

      $scope.map = { 
       center: center, 
       pan: false, 
       zoom: 16, 
       refresh: false, 
       events: {}, 
       bounds: {} 
      }; 

      $scope.map.circle = { 
       id: 1, 
       center: center, 
       radius: 500, //(current time - date lost)*km/hour 
       stroke: { 
        color: '#08B21F', 
        weight: 2, 
        opacity: 1 
       }, 

       fill: { 
        color: '#08B21F', 
        opacity: 0.5 
       }, 
       geodesic: false, // optional: defaults to false 
       draggable: false, // optional: defaults to false 
       clickable: true, // optional: defaults to true 
       editable: false, // optional: defaults to false 
       visible: true, // optional: defaults to true 
       events: { 
        dblclick: function() { 
         $log.debug("circle dblclick"); 
        }, 
        radius_changed: function (gObject) { 
         var radius = gObject.getRadius(); 
         $log.debug("circle radius radius_changed " + radius); 
        } 
       } 
      } 





      //Increase Radius: 
      $interval(function() { 
       $scope.map.circle.radius += 30; //dynamic var 
       $state.transitionTo('location', { //location is the state name 
        center: $stateParams.center, 
        radius: $scope.map.circle.radius 
       }, 
    { 
     notify: false 
    }); 
      }, 1000); //end of interval function 


     } ]); //end of controller 

})(window, angular);

Und index.html:

<!DOCTYPE html> 
<html ng-app="app"> 

<head> 
    <link rel="stylesheet" href="example/assets/stylesheets/example.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="website_libs/dev_deps.js"></script> 
    <script src="https://code.angularjs.org/1.3.6/angular.js"></script> 
    <script src="dist/angular-ui-router.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script> 
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="dist/angular-google-maps_dev_mapped.js"></script> 
    <script src="getLoc.js"></script> 
    <script src="searchRadius.js"></script> 


    <title>Pet Locate</title> 

    <!--NEW STUFF FROM TOM--> 


</head> 

<body style="height: 100%"> 



<div data-ng-controller="MapsCtrl" ng-if="map.center !== undefined" style="height: 100%"> 
    <ui-gmap-google-map 
         center='map.center' 
         zoom='map.zoom' 
         draggable='map.draggable' 
         dragging='map.dragging' 
         refresh='map.refresh' 
         options='map.options' 
         events='map.events' 
         pan='map.pan'> 


     <ui-gmap-circle 
         center='map.circle.center' 
         radius='map.circle.radius' 
         fill='map.circle.fill' 
         stroke='map.circle.stroke' 
         clickable='map.circle.clickable' 
         draggable='map.circle.draggable' 
         editable='map.circle.editable' 
         visible='map.circle.visible' 
         events='map.circle.events'> 

     </ui-gmap-circle> 


    </ui-gmap-google-map> 

</div> 


</body> 

</html>

Quelle

2016-09-25 Anonymous

Haben Sie das '' element auf Ihrer Seite? –

Ja, ich habe gerade index.html hinzugefügt, wenn Sie auch den Rest sehen wollen, vielleicht hat es etwas damit zu tun: ng-if = "map.center! == undefined"? –

Das, was ich dachte. Ich würde versuchen, das für jetzt zu entfernen. –

Dank @ Tom Coughlin für Ihr Kommentar, es hat mir das Problem bewusst gemacht, dass ich keine gültige "center" -Eigenschaft zurückgegeben habe, also hat die ng-if-Anweisung in index.html die Anzeige der Seite verhindert.

Quelle

2016-09-25 22:38:25

eckig-google-maps keine api-Tasten

Antwort

Verwandte Themen