Google Maps Geocoder Marker is not working on AngularJS

Question

I'm working with the Google Maps Geocoder service for AngularJS framework, but hadn't been able to show any markers so far.

Everything else seems to be working fine, but I really need the markers.

Here's my app.js:

angular.module('modelApp', ['ngAnimate', 'ui.bootstrap', 'google-maps'])

  .factory('MarkerCreatorService', function () {

      var markerId = 0;

      function create(latitude, longitude) {
          var marker = {
              options: {
                  animation: 1,
                  labelAnchor: "28 -5",
                  labelClass: 'markerlabel'
              },
              latitude: latitude,
              longitude: longitude,
              id: ++markerId
          };
          return marker;
      }

      function invokeSuccessCallback(successCallback, marker) {
          if (typeof successCallback === 'function') {
              successCallback(marker);
          }
      }

      function createByAddress(address, successCallback) {
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode({'address' : address}, function (results, status) {
              if (status === google.maps.GeocoderStatus.OK) {
                  var firstAddress = results[0];
                  var latitude = firstAddress.geometry.location.lat();
                  var longitude = firstAddress.geometry.location.lng();
                  var marker = create(latitude, longitude);
                  var results =  results[0];
                  invokeSuccessCallback(successCallback, marker);
              } else {
                  alert("Unknown address: " + address);
              }
          });
      }


      return {
          create: create,
          createByAddress: createByAddress
      };

  })

  .controller('modelCtrl', function ($scope, $http, $timeout, $q, $log, MarkerCreatorService){

    // $ajax Init
    $scope.model= [];

    $http.get('resources/model.json')
    .success(function(data){

      $scope.model= data;
    })

    $scope.address = '';

    $scope.map = {
        center: {
          latitude: 0,
          longitude: 0
        },
        zoom: 2,
        markers: [],
        control: {},
        options: {
            scrollwheel: false
        }
    };

    $scope.map.markers.push($scope.autentiaMarker);

    $scope.addAddress = function() {
        var address = $scope.address;

        if (address !== '') {
            MarkerCreatorService.createByAddress(address, function(marker) {
                $scope.map.markers.push(marker);
                refresh(marker);
            });
        }
    };

    function refresh(marker) {
        $scope.map.control.refresh({
            latitude: marker.latitude,
            longitude: marker.longitude});
        $scope.map.zoom = 5;
    }
  })

Here's the index.html:

<google-map center="map.center"
            zoom="map.zoom"
            draggable="true"
            options="map.options"
            control="map.control">
  <markers models="map.markers" coords="'self'" options="'options'" 
           isLabel="true">
  </marker>
</google-map>

So, I basically need to show the markers. Do you have any idea about what's wrong with my code?

Any help would be appreciated.

Answer 1

One approach is to convert the callback-based API to a promise-based API:

app.factory('MarkerCreatorService', function ($q) {

  //...

  function createByAddress(address) {
      var geocoder = new google.maps.Geocoder();
      var deferred = $q.defer();
      geocoder.geocode({'address' : address}, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
              var firstAddress = results[0];
              var latitude = firstAddress.geometry.location.lat();
              var longitude = firstAddress.geometry.location.lng();
              var marker = create(latitude, longitude);
              var results =  results[0];
              deferred.resolve(marker);
          } else {
              alert("Unknown address: " + address);
              deferred.reject("Unknown address: " + address);
          }
      });
      return deferred.promise;
  }

  //...

});

Usage

$scope.addAddress = function() {
    var address = $scope.address;
    if (address !== '') {
        MarkerCreatorService.createByAddress(address).then(function(marker) {
            $scope.map.markers.push(marker);
            refresh(marker);
        });
    }
};

By converting it to AngularJS promise, it integrates the API into the AngularJS framework and its digest cycle. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.