I am doing a project, where i show plenty of ships on a map using ngmap 1.13.13 with angularjs. I want to have custom markers on my map. But I never get them on my map or if, they are not scaled. i tried different approaches, here are two of them:

<div ng-repeat="p in points"> 
<marker icon=".png" icon.scale="0.1" position="{{p.latitude}}, {{p.longitude}}"></marker> 
</div>

also did this one: (here the image was shown, but the scale did not work)

<div ng-repeat="p in points">
<marker icon="{url: '../../images/delta.png', scale: 10}" position="{{p.latitude}}, {{p.longitude}}"></marker>
</div> 

But nothing worked, and the icon is either shown too big or not shown at all. In particular I just want to use my custom image with a custom scale. I saw lots of other post where they define the marker in the controller, but then I don't know how to 'tell' my view that it should use the predefined marker from the controller.

I am doing a project, where i show plenty of ships on a map using ngmap 1.13.13 with angularjs. I want to have custom markers on my map. But I never get them on my map or if, they are not scaled. i tried different approaches, here are two of them:

<div ng-repeat="p in points"> 
<marker icon="http://www.cliparthut./clip-arts/823/arrowhead-clip-art-823528.png" icon.scale="0.1" position="{{p.latitude}}, {{p.longitude}}"></marker> 
</div>

also did this one: (here the image was shown, but the scale did not work)

<div ng-repeat="p in points">
<marker icon="{url: '../../images/delta.png', scale: 10}" position="{{p.latitude}}, {{p.longitude}}"></marker>
</div> 

But nothing worked, and the icon is either shown too big or not shown at all. In particular I just want to use my custom image with a custom scale. I saw lots of other post where they define the marker in the controller, but then I don't know how to 'tell' my view that it should use the predefined marker from the controller.

• javascript
• angularjs
• html
• google-maps
• google-maps-api-3

1 Answer 1

To scale marker icon you could specify scaledSize property.

Example

var app = angular.module('mapApp', ['ngMap']);
app.controller('mapCntrl', function ($scope) {

    $scope.points = [
        { "name": "Canberra", "latitude": -35.282614, "longitude": 149.127775 },
        { "name": "Melbourne", "latitude": -37.815482, "longitude": 144.983460 },
        { "name": "Sydney", "latitude": -33.869614, "longitude": 151.187451 }
    ];


    $scope.customIcon = {
        "scaledSize": [32, 32],
        "url": "http://www.cliparthut./clip-arts/823/arrowhead-clip-art-823528.png"
    };

});

<script src="https://maps.google./maps/api/js"></script>
<script src="https://code.angularjs/1.3.15/angular.js"></script>
<script src="https://rawgit./allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">
    <ng-map center="[-26.6875847,135.0857733]" style="height: 480px;" zoom="4">
        <div ng-repeat="p in points">
            <marker icon="{{customIcon}}"  position="{{p.latitude}}, {{p.longitude}}" ></marker>
        </div>
    </ng-map>
</div>