Map Controller - Cordova Watch App

app.js

.factory('Location', function() {

  var position = {
    lat: '',
    lng: ''
  };

  var get = function(){
    return position;
  }

  var save = function(latitude, longitude){
    position = {
      lat: latitude,
      lng: longitude
    };
    console.log(position);
  }

  return {
    get: get,
    save: save
  };

})

.controller('mapCtrl', function($scope, $ionicPlatform, $state, Location) {

  $scope.ifValidAddress = false;
  
  $scope.disableTap = function(){
    container = document.getElementsByClassName('pac-container');
    angular.element(container).attr('data-tap-disabled', 'true');
    angular.element(container).on("click", function(){
      document.getElementById('search-place').blur();
    });
  };

  $scope.openCompass = function(){    
    $state.go('compass');
  };

  

  $scope.initWatchGlance = function(){

    var payload = {
      'label2': {'value': 'Table with a colors. ' + new Date(), 'color': '#FFFFFF'},
      'table': { // don't add selectable rows to a glance since glances are read-only
        'rows': [
          {
            'type': 'OneColumnRowType', // available types are specified in ObjC
            'group': {
              'backgroundColor': '#1884C4',
              'cornerRadius': 8
            },
            'label': {'value': '  images!'}, // unlike HTML, multiple spaces have effect
            'imageLeft': {'src': 'www/img/ionic.png', 'width': 25, 'height': 30},
            'imageRight': {'src': 'www/img/ionic.png', 'width': 25, 'height': 30}
          },
          {
            'type': 'OneColumnRowType',
            'group': {
              'backgroundColor': '#7884C4',
              'cornerRadius': 8
            },
            'label': {'value': '2nd row, no img'}
          }
        ]
      }
    };

    applewatch.loadGlance(payload);

    console.log('loading first glance');

  };

  $scope.mapWatchGlance = function(){

    $scope.location = Location.get();

    var payload = {
      'label': {
        'value': "Kettle's Locator",
        'color': '#FFFFFF',
        'font': {
          'size': 12
        }
      },
      'label2': {
        'value': "We have a new location. @" + new Date(),
        'color': '#FFFFFF',
        'font': {
          'size': 10
        }
      },
      'map': {
        'center': {

          // Amersfoort, The Netherlands
          'lat': $scope.location.lat,
          'lng': $scope.location.lng
          },

          'zoom': 2, // 0.001 is streetlevel, 4 fits the entire Netherlands

          'annotations': [ // up to 5 annotations (custom pins), any more are ignored (play with the zoom value to make them all fit)
            {
            'pinColor': 'green', // green | red | purple
            'lat': $scope.location.lat,
            'lng': $scope.location.lng
            }
          ]
      }
    };

    applewatch.loadGlance(payload);

    console.log('loading map glance');

  };

  document.addEventListener('deviceready', function(){
    console.log('device ready');
    // Apple Watch load Glance
    applewatch.callback.onLoadGlanceRequest = $scope.initWatchGlance();
    //applewatch.callback.onLoadAppDetailRequest = $scope.initWatchAppPage();
    console.log('end device ready');
  }, false);

  $ionicPlatform.ready(function() {
    /*
    applewatch.callback.onError = function (message) {
      console.log("Error: " + message);
    };
    */

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('search-place');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        $scope.ifValidAddress = false;
        $scope.$apply();
        console.log($scope.ifValidAddress);
        return;
      }

      $scope.ifValidAddress = true;
      $scope.$apply();
      console.log($scope.ifValidAddress);

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });

      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {

        Location.save(place.geometry.location.lat(), place.geometry.location.lng());

        $scope.mapWatchGlance();

        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }

      });

      map.fitBounds(bounds);

    });

  });

})