フュージョンテーブルを表示するNgMapディレクティブは一部のデータを削除します

Question

最近、私はGoogleマップを生成するための多くの作業を担当するngMapというオープンソースディレクティブを使用しました。

私はこれまで、aboutページにGoogleマップを表示していましたが、すべてをAngular viewを使用するように変更したとき、これは壊れました。だから私はすべてのものを取り戻して、今は私が望む視覚的な側面を持っています。単純にベースのGoogle Apiを使用しているときには、機能しないようなことはありますが

私は、新しい例では、マップにアタッチされたスタイルオプションがあることを知っています。指示文でそれを削除すると、PAだけが表示されます。例えば

： 古地図出力のこの種の

<script> 
    function Init() { 

     console.log("I loaded."); 

     google.maps.visualRefresh = true; 
     var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
     if (isMobile) { 
      var viewport = document.querySelector("meta[name=viewport]"); 
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
     } 
     var mapDiv = document.getElementById('googft-mapCanvas'); 

     var map = new google.maps.Map(mapDiv, { 
      center: new google.maps.LatLng(40.878100, -77.799600), 
      zoom: 7, 
      draggable: !("ontouchend" in document) 
     }); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

     layer = new google.maps.FusionTablesLayer({ 
      map: map, 
      heatmap: { enabled: false }, 
      query: { 
       select: "col4", 
       from: "1kDOtIvEE7OkCmPb_vPXluY0ZOjBD4lvyMICDSRMl", 
       where: "" 
      }, 
      options: { 
       styleId: 6, 
       templateId: 137 
      } 
     }); 

     google.maps.event.addDomListener(window, 'resize', function() { 
      map.setCenter(center); 
     }); 

     var center; 
     function calculateCenter() { 
      center = new google.maps.LatLng(40.878100, -77.799600); 
     } 
     google.maps.event.addDomListener(map, 'idle', function() { 
      calculateCenter(); 
     }); 


     if (isMobile) { 
      var legend = document.getElementById('googft-legend'); 
      var legendOpenButton = document.getElementById('googft-legend-open'); 
      var legendCloseButton = document.getElementById('googft-legend-close'); 
      legend.style.display = 'none'; 
      legendOpenButton.style.display = 'block'; 
      legendCloseButton.style.display = 'block'; 
      legendOpenButton.onclick = function() { 
       legend.style.display = 'block'; 
       legendOpenButton.style.display = 'none'; 
      } 
      legendCloseButton.onclick = function() { 
       legend.style.display = 'none'; 
       legendOpenButton.style.display = 'block'; 
      } 
     } 
    } 
</script> 

： Link to see desired output

新マップ：望ましくない出力で

<ng-map zoom="6" center="40.878100, -77.799600"> 
         <fusion-tables-layer query="{ 
    select: 'geometry', 
    from: '1kDOtIvEE7OkCmPb_vPXluY0ZOjBD4lvyMICDSRMl'}" , 
              styles="[{ 
              polygonOptions { 
              fillColor '#00FF00' , 
              fillOpacity 0.3 
              }]"> 
         </fusion-tables-layer> 
        </ng-map> 

： Image of undesired output

Answer 1

styles属性にタイプミスがあるので

指定されたスタイルが適用され取得されていない、有効な値は次のとおりです。

styles="[{ 
      polygonOptions: { 
       fillColor: '#00FF00' , 
       fillOpacity: 0.3 
     } 
}]" 

例

angular.module('map-app', ['ngMap']) 
 
    .controller('map-controller', ['NgMap', 
 
     function (NgMap) { 
 
      
 
     }]);

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 

 
<div ng-app="map-app" ng-controller="map-controller"> 
 
    <ng-map center="40.878100, -77.799600" zoom="6"> 
 

 
    <fusion-tables-layer query="{select: 'geometry', 
 
    from: '1kDOtIvEE7OkCmPb_vPXluY0ZOjBD4lvyMICDSRMl'}" , styles="[{ 
 
               polygonOptions: { 
 
                fillColor: '#00FF00' , 
 
                fillOpacity: 0.3 
 
               } 
 
              }]"> 
 
    </fusion-tables-layer> 
 

 
    </ng-map> 
 
</div>