title: Google Maps Geocoder Marker is not working on AngularJS
body: <p>I'm working with the Google Maps Geocoder service for AngularJS framework, but hadn't been able to show any markers so far. </p>
  
  <p>Everything else seems to be working fine, but I really need the markers.</p>
  
  <p>Here's my app.js:</p>
  
  <pre><code>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
        };
  
    })
  </code></pre>
  
  
  
  <pre><code>  .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;
      }
    })
  </code></pre>
  
  <p>Here's the index.html:</p>
  
  <pre><code>&lt;google-map center="map.center"
              zoom="map.zoom"
              draggable="true"
              options="map.options"
              control="map.control"&gt;
    &lt;markers models="map.markers" coords="'self'" options="'options'" 
             isLabel="true"&gt;
    &lt;/marker&gt;
  &lt;/google-map&gt;
  </code></pre>
  
  <p>So, I basically need to show the markers. Do you have any idea about what's wrong with my code? </p>
  
  <p>Any help would be appreciated.</p>