title: Angular-Google-Map: How to Load Map after Position Data Loaded(Lat, Lng)?
body: <p>I got the error:
  'angular-google-maps: could not find a valid center property'. 
  when I $watch my locationData loaded from php backend and exec initialize function.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-init="locationData = '&lt;?=htmlspecialchars($data)?&gt;'"&gt;
      &lt;google-map center="map.center" zoom="map.zoom" options="map.options"&gt;&lt;/google-map&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular Controller:</p>
  
  <pre><code>app.controller('MapCtrl', ['$scope', function ($scope) {
      'use strict';
  
      $scope.$watch('locationData', function() {
          var location = JSON.parse($scope.locationData);
          $scope.location = {
              lng : location.longitude,
              lat : location.latitude
          initialize();
      });
  
      function initialize() {
          var mapOptions = {
              panControl    : true,
              zoomControl   : true,
              scaleControl  : true,
              mapTypeControl: true,
              mapTypeId     : google.maps.MapTypeId.ROADMAP
          };
  
          $scope.map = {
              center: {
                  latitude: $scope.location.lat,
                  longitude: $scope.location.lng
              },
              zoom: 13,
              options: mapOptions,
          };
      }
  }]);
  </code></pre>
  
  <p>And, I move $scope.map settings to the top of the controller block and set constant value to map</p>
  
  <pre><code>center: {
      latitude: 0,
      longitude: 0
  },
  </code></pre>
  
  <p>, map show correctly. </p>
  
  <p>Angular Controller:</p>
  
  <pre><code>app.controller('MapCtrl', ['$scope', function ($scope) {
      'use strict';
  
      var mapOptions = {
          panControl    : true,
          zoomControl   : true,
          scaleControl  : true,
          mapTypeControl: true,
          mapTypeId     : google.maps.MapTypeId.ROADMAP
      };
  
      $scope.map = {
          center: {
              latitude: 0,
              longitude: 0
          },
          zoom: 13,
          options: mapOptions,
      };
  }]);
  </code></pre>
  
  <p>How can do google map directive parse after data loaded and show map correctly with backend Lat, Lng data? </p>