AngularJS: Route displaying blank page

Question

I have a route/view that is displaying a blank page. I am pretty sure it was working the way I have it right now a few days ago which leads me to think it is a problem with my Google Maps API key, but there are no errors or warnings so I think it has to do with my routing setup. But I have another view set up exactly the same way and that one does work...

Broken view: http://alainwebdesign.ca/pl2/#/49.2/-122.66

Working view: http://alainwebdesign.ca/pl2/#/getLocation

Controller (I commented out the.config for Google Map API because I have a script reference in my view searchRadius.html) :

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



  .config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error 
      $stateProvider.state('searchRadius', {
          url: '/:lat/:lon',
          templateUrl: 'searchRadius.html', //changed from  index to searchRadius.html
          controller: 'MapsCtrl',
      });
  })


  ////ALREADY HAVE GOOGLE MAPS KEY ON searchRadius.html
    .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
      GoogleMapApi.configure({
          key: 'AIzaSyC_XEbbw3sNm4XlLAgqMJTggeHLDUdV-pY',
          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: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) };
      alert(JSON.stringify(center));
      Object.freeze(center); //caused TypeError: Cannot assign to read only property ('latitude') ...

      console.log($stateParams);

      $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
      }, 1000); //end of interval function


  } ]); //end of controller

})(window, angular);

searchRadius.html:

<div style="height: 100%"> <!--took out: ng-if="map.center !== undefined"-->
    <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>
<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyC_XEbbw3sNm4XlLAgqMJTggeHLDUdV-pY'></script>
</div>

Enkuushka · Accepted Answer · 2016-10-10 08:44:13Z

1

Combine the 2 files into 1 file and initialize the $stateProvider in a single line.

edited Oct 10, 2016 at 8:44

answered Oct 10, 2016 at 7:20

Enkuushka

4251 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Tom Over a year ago

You mean is the code I have posted above for my controller the same that I'm using currently for searchRadius.html? Yes it is

Tom Over a year ago

I am trying to use getLoc.js for my getlocation.html view, and searchRaidus.js for my searchRadius.html but maybe I have it set up wrong?

Tom Over a year ago

Sorry I don't know what path you're talking about. But I use routing to link the MapsCtrl Controller to searchRadius.html here: ' templateUrl: 'searchRadius.html', controller: 'MapsCtrl',' so the paths should be ok shouldn't they?

user5109957 Over a year ago

I already have an alert that shows JSON.stringify(center) a few lines below the start of the controller, so they must not be linked

Enkuushka Over a year ago

Can you combine the router JS codes in one? or change the order of loading in HTML? I think the getLoc.js is overwriting. Just change the order of JS files. Let's see that.

|

Collectives™ on Stack Overflow

AngularJS: Route displaying blank page

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related