AngularjsとGoogle maps API

Question

私はAngularJSでGoogleマップを持っていますが、それぞれのng-repeatの方向（つまりAからBまでの線）でマーカーを作成しようとしています。誰かが私を支援してください可能性があり、私は表示されないマップを試してみてください、異なる角度のプロジェクトが、すべてのものを見てきました

function quoteCtrl ($scope,$http,refnum,$state,$uibModal,notify) { 

    $scope.mapOptions = { 
     zoom: 11, 
     center: new google.maps.LatLng(40.6700, -73.9400), 
     // Style for Google Maps 
     styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}], 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

        var urlgetjobs = './dbscripts/getQuotes.php'; 

        $http({method: 'GET', url: urlgetjobs}).success(function(data) { 
         $scope.quotes = data; 
        }).error(function(data){ 

        }); 

        $scope.formatDte=function(dte){ 
         var dtee = moment(dte).format("dddd Do MMMM, h:mm a"); 
         return dtee; 
        } 

    } 

：この私たちは私のHTMLは

<div class="col-lg-12" ng-repeat="quotes in quotes"> 
     <div class="ibox float-e-margins"> 
      <div class="ibox-title"> 
       <span class="label label-success pull-right">{{formatDte(quotes.date)}}</span> 
       <h5>{{quotes.name}}</h5> 
      </div> 
      <div class="ibox-content"> 
       <h1>{{quotes.pnum}}</h1> 
       <p>{{quotes.pcodefrom}} to {{quotes.pcodeto}}</p> 

       <small>Reg : {{quotes.Reg}}</small> 
       <br/> 
       <small>Notes : {{quotes.notes}}</small> 

    <div class="row"> 
     <div class="col-md-12"> 
      <div class="ibox "> 
       <div class="ibox-content"> 
        <section id="map" ng-controller="GoogleMaps"> 
         <div ui-map="myMap" ui-options="mapOptions" class="google-map"></div> 
        </section> 
       </div> 
      </div> 
     </div> 

    </div> 
     </div> 
      </div> 
     </div> 

これは私のコントローラで私のコードです私の単純なコードにimplimentingので、ちょうどng-repeatの関数に2つのアドレスまたはポストコードを送ることができ、マップはそれだけで静的なマップではなくルートを表示しますか？

おかげ

Answer 1

あなたはngMapを使用して試すことができます。私たちはプロジェクトでそれを使用しました。私たちのためにうまく動作します。

Refernceリンク：https://ngmap.github.io/

コントローラーで

https://github.com/allenhwkim/angularjs-google-maps

：あなたが使用して、マップのインスタンスをインスタンス化することができますNgMapサービス：Htmlので

NgMap.getMap().then(function (map) { 
    $scope.map = map; 
}); 

：ここで私は取得しています組織のリストとでng-repeatを使用できますタグを使用し、マーカーを区別するために、マーカーにIDを動的に割り当てることができます。

<ng-map default-style="false" id="map" center="current-position" zoom="12" style="height:550px;width:100%;"> 
    <marker ng-repeat="org in orgList" id="id_{{org.organizationLocationAddressId}}" position="{{org.location}}" on-click="selectOrg(org)" on-mouseover="showDetails(org)" on-mouseout="hideDetail()" draggable="{{org.isDraggable}}" on-dragend="changeLocation($event)" on-position-changed="getMarkerPosition()" icon="{{org.organizationLocationId == selectedId?iconsList.SELECTED_ICONS[org.organizationTypeIconsEnum]:org.organizationTypeIcon}}"></marker> 
</ng-map>