angular-google-maps: how to get current model in ui-gmap-markers

Question

I'm trying to load icon for each mark. each mark's icon is different.

I have a function "getIcon", it will needs the uid from each binding model(item.Uid).

If I pass "this" to getIcon, it is undefined.

It seems like there is no way to find the current model.

I will have to use "ui-gmap-markers" here not "ui-gmap-marker"

This options works really weird.

<ui-gmap-markers models="items" idkey="'Uid'"                     
                 options="{icon: getIcon(this, map.zoom)}"
                 coords="'self'" icon="'icon'">
</ui-gmap-markers>

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2015-11-10T23:49:54

In this example this refers to ui-gmap-markers directive isolated scope and the model property is not accessible since it belongs to child scope.

You could consider the following approach to bind icon marker based on map zoom.

First, let's introduce an array of icons per every zoom level:

$scope.zoomIcons = {};
var althabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
var l = 0;
althabet.forEach(function(ch){
    $scope.zoomIcons[l] = 'http://www.google.com/mapfiles/marker' + ch + '.png';
    l++;
});

Then let's specify marker icon using icon directive attribute:

<ui-gmap-markers models="items" idkey="'Uid'" coords="'self'" icon="'icon'">                 
</ui-gmap-markers>

where icon property along with another properties will be initialized per every marker(see below example for a more details)

And the last step would be to update marker icon once the map zoom is changed as shown below:

$scope.$watch(function () { return $scope.map.zoom; }, function (newZoom, oldZoom) {
    if(newZoom != oldZoom){
        console.log('Zoom:' + newZoom + ':'  + oldZoom);  
        $scope.items.forEach(function(item){
          item.icon = $scope.getIcon(newZoom);    
        }); 
    }
}, true);

Working example

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function($scope) {
    $scope.map = {
        center: { latitude: 40.1451, longitude: -99.6680 },
        zoom: 4,
        options: { scrollwheel: false }
    };

    $scope.zoomIcons = {};
    var althabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
    var l = 0;
    althabet.forEach(function(ch){
        $scope.zoomIcons[l] = 'http://www.google.com/mapfiles/marker' + ch + '.png';
        l++;
    });

    var getRandomLat = function() {
        return Math.random() * (180.0) - 90.0;
    };
    var getRandomLng = function () {
        return Math.random() * (360.0) - 180.0;
    };  


    var createRandomMarker = function(i) {
        var item = {
            latitude: getRandomLat(),
            longitude: getRandomLng(),
            title: '#' + i,
            show: true,
            Uid: i,
            icon: $scope.getIcon($scope.map.zoom)
        };
        return item;
    };


    $scope.getIcon = function(zoom) {
        return { url: $scope.zoomIcons[zoom] };
    };
    
    $scope.items = [];
    for (var i = 0; i < 160; i++) {
        $scope.items.push(createRandomMarker(i));
    }
  
    
    $scope.$watch(function () { return $scope.map.zoom; }, function (newZoom, oldZoom) {
        if(newZoom != oldZoom){
            console.log('Zoom:' + newZoom + ':'  + oldZoom);  
            $scope.items.forEach(function(item){
              item.icon = $scope.getIcon(newZoom);    
            }); 
        }
    }, true);
});

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#map_canvas {
    position: relative;
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl"> 
        <ui-gmap-google-map center="map.center" zoom="map.zoom"  options="map.options" events="map.events">
            <ui-gmap-markers models="items" idkey="'Uid'" 
                             coords="'self'" icon="'icon'" >                 
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

angular-google-maps: how to get current model in ui-gmap-markers

1 Answers