0

How to draw polyline between multiple markers using ngmap?

This is my ngmap code on dynamic marker using ng repeat

<div map-lazy-load="http://maps.google.com/maps/api/js" map-lazy-load-params="{{googleMapsUrl}}" class="fullmap">
<map center="{{mapCenter.lat}},{{mapCenter.lng}}" zoom="{{mapCenter.zoom}}" pan-control="true" scrollwheel="false" default-style="false"  >
    <custom-control id="searchCtrl" position="TOP_CENTER" index="1" on-click="doSearch()">
        <button>Search</button>
    </custom-control>
    <marker ng-repeat="pos in positions" position="{{pos.latitude}}, {{pos.longitude}}"
            title="({{pos.deviceTime| date:'medium'}}) GPS: {{pos.latitude}}/{{pos.longitude}}, Speed: {{pos.speed}}, Course: {{pos.course}}"
            id="pos{{pos.id}}"
            icon="{{'assets/green.png'}}"
            visible="true">
    </marker>
</map>
</div>
Thai Hau
  • 1
  • 1

1 Answers1

0

Found answer from this link

So, i just need to create an array object of latitude and longitude for path in shape directive

HTML

<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"></shape>

Controller

 $scope.path = $scope.positions.map(function(position){
     return [position.latitude,position.longitude];
});
Community
  • 1
  • 1
Thai Hau
  • 1
  • 1