Dynamically add multiple markers to Angular Google Map + pagination

[Christy]

I am creating an angular/node/express app. One page must display a list of locations (from JSON file) and also plot each location on a google map. This list of locations is being populated when a user clicks a button that calls getLocations(). The catch is that my list of locations is using pagination and only displaying up to 5 results at a time. I need my map to only display these same 5 locations at a time and change when the page changes.

I'm newer to angular and having trouble dynamically loading the locations onto the map using the ui-gmap-markers directive. I only have the list of locations working with pagination right now. Any ideas of how to get the map markers to work?

JSON Snippet: 

[{"LOC_ID":"0001","LONGITUDE":-115.175777,"LATITUDE":36.098731,"LOC_NAME":"ABC","ADDRESS":"3850 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0002","LONGITUDE":-115.170801,"LATITUDE":36.099031,"LOC_NAME":"DEF","ADDRESS":"3801 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0003","LONGITUDE":-115.176116,"LATITUDE":36.095784,"LOC_NAME":"GHI","ADDRESS":"3900 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0004","LONGITUDE":-115.428098,"LATITUDE":36.135511,"LOC_NAME":"JKL","ADDRESS":"3205 NEVADA 159","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89161"},{"LOC_ID":"0005","LONGITUDE":-115.170221,"LATITUDE":36.112358,"LOC_NAME":"MNO","ADDRESS":"3655 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0006","LONGITUDE":-115.168525,"LATITUDE":36.122917,"LOC_NAME":"PQR","ADDRESS":"3355 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0007","LONGITUDE":-115.156306,"LATITUDE":36.147695,"LOC_NAME":"STU","ADDRESS":"2000 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89104"}]

Jade Snippet:

.button(ng-click="getLocations()")

.location-details

  ul

    li(ng-repeat"location in locations | startFrom:currentPage*pageSize | limitTo:pageSize")

      h3 {{location.name}}

      span {{location.address}}

      span {{location.city}}

      span {{location.state}}

      span {{location.zip}}

.map

  .angular-google-map-container

    ui-gmap-google-map(center='map.center' zoom='map.zoom')

      ui-gmap-markers

Controller Snippet:

$scope.getLocations = function(){

    $scope.jsonUrl = 'https://mytestsite.com/locations.json';

    $http.get($scope.jsonUrl)

    .then(function (response) {

        $scope.locations = response.data

        $scope.jsonLength = $scope.locations.length;

        for (var i = 0; i<=$scope.jsonLength - 1; i++) {

            //doing custom stuff here

        }

        $scope.pagingResults();

    }

};

$scope.map = {

    center: {

        latitude: 39.7701769,

        longitude: -98.5815046,

    },

    zoom: 8

};

[Sander Elias]

Hi Christy,

I'm missing the part in your code where you assign the array to your google map, so I can't help you there. But you can assign the results of your filters to a new scope variable in the view like this:

li(ng-repeat"location in selectedLocations = locations | startFrom:currentPage*pageSize | limitTo:pageSize")

And then use the selectedLocations in your google maps.

Regards

Sander

[Christy]

Hi Sander,

Sorry for taking so long to respond. I didn't assign an array in my google map yet. Can you please help with this step? Will I be assigning the array to $scope.map? 

Thanks.

[Sander Elias]

Hi Christy,

I don't know. As your code does reveal nothing about your google maps implementation. If you build a plunk where this part is missing I can take a look at it.

Regards

Sander