Googleマップ - タブ情報ウィンドウの問題

私は2つのタブでngマップを使用しています。ロード時に両方のタブにアドレスを指定してマーカーを表示します。コンソールにエラーを表示するマーカーが1回ある場合。私は試していますが、修正できません。 Onload私は両方のタブに（情報ウィンドウ）アドレスでマーカーを表示したいと思います。Googleマップ - タブ情報ウィンドウの問題

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script> 
    <script> 
     angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngMap']); 
     angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window, $timeout) { 
      this.address = "Toronto Canada"; 

      $scope.reRednerMap = function() { 
      $timeout(function() { 
       angular.forEach($scope.maps, function(index) { 
        google.maps.event.trigger(index, 'resize'); 
       }); 
      }, 500); 
     } 
     $scope.maps = []; 
     $scope.$on('mapInitialized', function(evt, evtMap) { 
      $scope.maps.push(evtMap); 
     }); 
     $scope.reRednerMap(); 
     }); 
    </script> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<style type="text/css"> 
    form.tab-form-demo .tab-pane { 
    margin: 20px 20px; 
    } 
</style> 

<div ng-controller="TabsDemoCtrl"> 

    <uib-tabset active="active"> 
    <uib-tab index="0" heading="tab 1" select="reRednerMap()"> 
     <ng-map center="13.0222427,80.1745555"" zoom="12" style="width:600px; height:400px"> 
       <marker position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar1')"> 
       </marker> 
       <info-window id="bar1"> 
        <div ng-non-bindable> 
         <div>channi Tamil nadu</div> 
        </div> 
       </info-window> 
      </ng-map> 

    </uib-tab> 
    <uib-tab index="1" heading="tab 2" select="reRednerMap()"> 
     <ng-map center="13.0222427,80.1745555"" zoom="12" style="width:600px; height:400px"> 
       <marker id="current_marker" position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar')"> 
       </marker> 
       <info-window id="bar"> 
        <div ng-non-bindable> 
         <div>channi CMBT</div> 
        </div> 
       </info-window> 
      </ng-map> 

    </uib-tab> 

    </uib-tabset> 


</div> 
    </body> 
</html>

出典

2016-03-22 senthil

次の構文を使用します。

map.showInfoWindow('bar1', 'marker1');

bar1情報ウィンドウを開くために - マーカー要素のid

- 情報ウィンドウ要素

marker1のIDを

以下の変形例は、マップがロードされると情報ウィンドウを開く方法を示しています

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngMap']); 
 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $timeout, NgMap) { 
 
     this.address = "Toronto Canada"; 
 
     $scope.maps = {}; 
 

 
     NgMap.getMap({ id: 'map1' }).then(function (map) { 
 
       map.showInfoWindow('bar1', 'marker1'); //show marker on map load 
 
       $scope.maps['map1'] = map; 
 
     }); 
 

 
     NgMap.getMap({ id: 'map2' }).then(function (map) { 
 
       map.showInfoWindow('bar2', 'marker2'); //show marker on map load 
 
       $scope.maps['map2'] = map; 
 
     }); 
 

 
     $scope.resizeMap = function() { 
 
       $timeout(function() { 
 
         angular.forEach($scope.maps, function (map) { 
 
           google.maps.event.trigger(map, 'resize'); 
 
         }); 
 
       }); 
 

 
     }; 
 

 
});

form.tab-form-demo .tab-pane { 
 
    margin: 20px 20px; 
 
    }

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>  
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div ng-app="ui.bootstrap.demo" ng-controller="TabsDemoCtrl"> 
 

 
    <uib-tabset active="active"> 
 
    <uib-tab index="0" heading="tab 1" select="resizeMap()"> 
 
     <ng-map id="map1" center="13.0222427,80.1745555" zoom="12" style="width:600px; height:400px"> 
 
       <marker id="marker1" position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar1')"> 
 
       </marker> 
 
       <info-window id="bar1"> 
 
        <div ng-non-bindable> 
 
         <div>channi Tamil nadu</div> 
 
        </div> 
 
       </info-window> 
 
      </ng-map> 
 

 
    </uib-tab> 
 
    <uib-tab index="1" heading="tab 2" select="resizeMap()"> 
 
     <ng-map id="map2" center="13.0222427,80.1745555" zoom="12" style="width:600px; height:400px"> 
 
       <marker id="marker2" position="13.0222427,80.1745555" on-click="map.showInfoWindow('bar2')"> 
 
       </marker> 
 
       <info-window id="bar2"> 
 
        <div ng-non-bindable> 
 
         <div>channi CMBT</div> 
 
        </div> 
 
       </info-window> 
 
      </ng-map> 
 

 
    </uib-tab> 
 

 
    </uib-tabset> 
 

 

 
</div>

出典

2016-03-22 21:26:40

Googleマップ - タブ情報ウィンドウの問題

答えて

関連する問題