Search code examples
angularjsng-map

ngMap - how to draw a polygon using an array


I'm trying to draw a polygon using http://ngmap.github.io/. If I use the following code it works perfectly:

    <map center="<% latitude %>, <% longitude %>" zoom="2">
        <marker 
            ng-repeat="marker in GoogleMap.markers" 
            on-click="showInfoWindow(event, marker)" 
            icon="/images/<% marker.icon %>" 
            position="<% marker.latitude %>, <% marker.longitude %>"
        >
        </marker>
        <shape
            paths="[[25.774252, -80.190262],[18.466465, -66.118292],[32.321384, -64.75737],[25.774252, -80.190262]]"
            name="polygon"
            stroke-color="#FF0000" 
            stroke-opacity="0.8" 
            stroke-weight="2" 
            fill-color="#FF0000" 
            fill-opacity="0.35"
        >
        </shape>
    </map>

However, if I assign the polygon coordinates to a scope variable inside my controller it crashes with "not an array" as follows

    <map center="<% latitude %>, <% longitude %>" zoom="2">
        <marker 
            ng-repeat="marker in GoogleMap.markers" 
            on-click="showInfoWindow(event, marker)" 
            icon="/images/<% marker.icon %>" 
            position="<% marker.latitude %>, <% marker.longitude %>"
        >
        </marker>
        <shape
            paths="polgon"
            name="polygon"
            stroke-color="#FF0000" 
            stroke-opacity="0.8" 
            stroke-weight="2" 
            fill-color="#FF0000" 
            fill-opacity="0.35"
        >
        </shape>
    </map>

... where polygon is defined inside my controller as

$scope.polygon = [[25.774252, -80.190262],[18.466465, -66.118292],[32.321384, -64.75737],[25.774252, -80.190262]];

Am I missing something obvious? Any help is appreciated.


Solution

  • The problem was that the value for paths was going as "polygon" string, and not as the array.

    It was resolved by adding curly braces.