Refreshing map and markers with angular-google-maps

Question

Hi I am using the angular-google-maps for my project. The html and js code is as follows

html:

        <ui-gmap-markers models="apartments" coords="'loc'" icon="'assets/images/map_icon_normal.png'" idkey="'_id'"
                     fit="'false'" click="click">


      <ui-gmap-windows show="'show'" >
        <div ng-non-bindable>{{streetAddress}}</div>

      </ui-gmap-windows>
    </ui-gmap-markers>



  </ui-gmap-google-map>

Script: angular.module('myApp')

.controller('MapCtrl',
                    function ($scope, $routeParams, Map, uiGmapGoogleMapApi) {
 $scope.apartments = [];
 $scope.customIcon = "../../assets/images/map_icon_normal.png"

$scope.map = {
      center: {
        latitude: $routeParams.lat,
        longitude: $routeParams.lon
      },

      zoom: 5,
      bounds: {},
      events: {
        tilesloaded: function (map) {
          //console.log('tiles loaded');
          $scope.$apply(function () {
            $scope.mapInstance = map;
            //console.log(map.getBounds().getNorthEast());
            $scope.searchbox.options.bounds = new google.maps.LatLngBounds($scope.mapInstance.getBounds().getNorthEast(),
              $scope.mapInstance.getBounds().getSouthWest());

          });
        },
        idle: function(map) {

          $scope.map.refresh = false;

        },
        resize: function(map) {
          console.log('resize');
        },
        dragend: function() {

        }
      },
      markersEvents: {
        click: function(marker, eventName, model, args) {
          console.log('markerEvent click');
          $scope.map.window.model = model;
          $scope.map.window.show = true;
        }
      },

      window :  {
        marker: {},
        show: false,
        closeClick: function() {
          this.show = false;
        },
        options: {} // define when map is ready
      },

      control: {},
      refresh: function () {
        $scope.map.control.refresh();
      }
    }

    uiGmapGoogleMapApi.then(function (map) {

      $scope.getData(20, 0, map);

      map.visualRefresh = true;
      $scope.mapInstance = map;


    })

       $scope.getData = function(limit, offset, map) {
      Map.getApartments($routeParams.lat, $routeParams.lon, limit, offset).success(function (data) {
         ///----- I get undefined error here---
              $scope.map.control.refresh();



      });

    }})
}

I am not sure how to refresh the map with the new markers or even trigger an update to the map. I played around with 'control' and 'refresh' params of the ui-gmap-google-map but cannot get it to work.

Answer 1

You need to use uiGmapIsReady --- not uiGmapGoogleMapApi --- to wait for control objects to be augmented with their methods (such as refresh).

The uiGmapIsReady service provides a promise which resolves when all uiGmapGoogleMap directives have been fully initialized, while the uiGmapGoogleMapApi service resolves simply when the Google Maps JS API has loaded.

See this answer for an example of using uiGmapIsReady. And of course, don't forget the docs.

Regarding how to get updates to your models property on the scope to cause updates to your map, your code example needs to be fleshed out and cleaned up to help you there. (For example, what is the resolution of getApartments doing to update $scope.apartments? Or maybe asking that question is itself the answer?) Take a look at this fiddle, it might help you in the meantime.