javascriptangularjsgoogle-mapsgoogle-maps-markersng-map

Ng map marker icon with params (url to hosted image) not working


In ng map this works:

<marker ng-repeat="helper in helpers" position="{{helper.position}}" optimized="false" icon={{helper.facebook.freshURL}}"></marker>

But if I put in params in "icon":

<marker ng-repeat="helper in helpers" position="{{helper.position}}" optimized="false" icon="{url: '{{helper.facebook.freshURL}}', anchor: [0,0]}"></marker>

It seems that the url has a prefix with "localhost:8000" before the url, and I get an error:

GET http://localhost:8100/%7Burl:%20https://graph.facebook.com/1716361775351742/picture?type=normal,%20anchor:%20[0,0]} 404 (Not Found)

Is this a bug or some syntax error on my side? Thanks.


Solution

  • This behavior is related with the JSON error that occurs while parsing the expression: {url: '{{helper.facebook.freshURL}}', anchor: [0,0]}

    Once the valid expression is provided for icon attribute, for example icon='{"url":"{{helper.facebook.freshURL}}","anchor":[0,0]}', the marker icon will be properly initialized.

    Example

    var app = angular.module('appMaps', ['ngMap']);
    app.controller('mapCtrl', function ($scope) {
        
        $scope.cities = [
           { id: 1, name : "Brisbane", location: [-33.867396, 151.206854] }
        ];
    
    
        $scope.iconProperties = {
           url : "http://maps.google.com/mapfiles/marker.png",
           anchor: [0,0]   
        };
    
        $scope.iconUrl = "http://maps.google.com/mapfiles/marker.png";
    
    });
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <div ng-app="appMaps" ng-controller="mapCtrl">
            <map center="[-24.667856, 133.630694]" zoom="3">
                <!--marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.location}}" icon="{{iconProperties}}" -->
                <marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.location}}" icon='{"url":"{{iconUrl}}","anchor":[0,0]}'>
                </marker>
                
            </map>
    </div>