stackoom
  简体   繁体   中英

Angular-google-maps not loading in bootstrap tab

 原文  2015-11-17 12:22:51  7   2    javascript/ angularjs/ google-maps

Question

Angular google map is not loading in bootstrap tab

but, the google map will load perfectly if i minimizing the window

IN MY CONTROLLER 

var app = angular.module('mymap', ['uiGmapgoogle-maps', 'ngAnimate', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.fullmap = {
            center: {latitude: 67, longitude: -55},
            zoom: 8,
            id: 9345,
            events: {
                tilesloaded: function (map) {
                    $scope.$apply(function () {
                        google.maps.event.trigger(map, "resize");
                    });
                }
            }
    }
});

HTML FILE 

 <uib-tabset>
    <uib-tab heading="FEATURED" active=true >
        <br><br>
    </uib-tab> 
    <uib-tab heading="RECENTLY USED">
        <br><br>
        RECENTLY USED  
    </uib-tab>
    <uib-tab heading="TOP RATED" >
        <br><br>
        TOP RATED
    </uib-tab>
    <uib-tab heading="NEAR ME" ng-click="loadmap()">
        <br><br>
        <div class="single-map-view" id="mapview">
          <ui-gmap-google-map center='fullmap.center' zoom='fullmap.zoom' refresh="true">
            <ui-gmap-marker idkey="fullmap.id" coords="fullmap.center" events="fullmap.events"></ui-gmap-marker>
          </ui-gmap-google-map>
        </div>
    </uib-tab>
</uib-tabset>

DEMO : http://plnkr.co/edit/q7MdFxZ3Am5hvk1hL2Ja?p=preview

Anyone have idea why this happens ?

Thanks in advance !

2 answers

solution1
 1  2015-11-17 13:06:47

See if it helps you:

EDIT 1 

 angular.module('myApp', ['directives']); function MyMapCtrl ($scope) { $scope.selected = 'first'; // try to put 'second' here } angular.module('directives', []).directive('map', function() { return { restrict: 'E', replace: true, template: '<div></div>', link: function($scope, element, attrs) { var center = new google.maps.LatLng(50.1, 14.4); var map_options = { zoom: 14, center: center, mapTypeId: google.maps.MapTypeId.SATELLITE }; // create map var map = new google.maps.Map(document.getElementById(attrs.id), map_options); // configure marker var marker_options = { map: map, position: center }; // create marker var marker = new google.maps.Marker(marker_options); $scope.$watch('selected', function () { window.setTimeout(function(){ google.maps.event.trigger(map, 'resize'); },100); }); } } }); 
 body { padding: 10px; } #map_canvas { margin: 0; padding: 0; height: 400px; border: 1px solid #ccc; } .tabs { height: 35px; margin: 0; width: 100%; } .tab { background-color: #E4E4E4; cursor: pointer; float: left; font-size: 12px; margin-right: 10px; padding: 10px 0 10px; text-align: center; width: 85px; line-height: 15px; } .selected { background-color: silver; } .tab_content { background-color: silver; height: 400px; } p { padding: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <div ng-app="myApp" ng-controller="MyMapCtrl"> <div class="tabs"> <div ng-click="selected = 'first'" ng-class="{'selected': selected == 'first'}" class="tab">first</div> <div ng-click="selected = 'second'" ng-class="{'selected': selected == 'second'}" class="tab">second</div> </div> <div ng-show="selected == 'first'" class="tab_content"> <p>some content here...</p> </div> <div ng-show="selected == 'second'" class="tab_content"> <map id="map_canvas"></map> </div> </div>

EDIT 2

Add in your code: modelsbyref="false" dorebuildall="true" 

<!DOCTYPE html>
<html ng-app="mymap">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link href="style.css" rel="stylesheet" />
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
        <script data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-require="angular.js@1.4.x"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
        <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <uib-tabset>
            <uib-tab heading="FEATURED" active=true >
                <br><br>
            </uib-tab> 
            <uib-tab heading="RECENTLY USED">
                <br><br>
                RECENTLY USED  
            </uib-tab>
            <uib-tab heading="TOP RATED" >
                <br><br>
                TOP RATED
            </uib-tab>
            <uib-tab heading="NEAR ME" ng-click="loadmap()">
                <br><br>
                <div class="single-map-view" id="mapview">
                    <ui-gmap-google-map modelsbyref="false" dorebuildall="true" center='fullmap.center' zoom='fullmap.zoom' refresh="true">
                        <ui-gmap-marker idkey="fullmap.id" coords="fullmap.center" events="fullmap.events"></ui-gmap-marker>
                    </ui-gmap-google-map>
                </div>
            </uib-tab>
        </uib-tabset>
    </body>

</html>

solution2
 0  2016-05-30 09:18:26

First of all, this problem is caused by a conflict between bootstrap tabs and google maps. A workaround for this is to actually put the tab containing the map outside ui-tabset , and show/hide it when the user clicks on the corresponding tab. 

    <uib-tabset>
    <uib-tab ng-click="hideMap()" heading="FEATURED" active=true >
        <br><br>
    </uib-tab> 
    <uib-tab ng-click="hideMap()" heading="RECENTLY USED">
        <br><br>
        RECENTLY USED  
    </uib-tab>
    <uib-tab ng-click="hideMap()" heading="TOP RATED" >
        <br><br>
        TOP RATED
    </uib-tab>
    <uib-tab heading="NEAR ME" ng-click="showMap()">

    </uib-tab>
</uib-tabset>
<div ng-if="isMapShown">
<br><br>
        <div class="single-map-view" id="mapview">
          <ui-gmap-google-map center='fullmap.center' zoom='fullmap.zoom' refresh="true">
            <ui-gmap-marker idkey="fullmap.id" coords="fullmap.center" events="fullmap.events"></ui-gmap-marker>
          </ui-gmap-google-map>
        </div>
</div>

In the controller, define the show/hide map functions: 

app.controller('MainCtrl', function($scope) {

     $scope.hideMap = hideMap;
     $scope.showMap = showMap;
     $scope.isMapShown = false;

     function hideMap() {
       $scope.isMapShown = false;
     }
     function showMap() {
       $scope.isMapShown = true;
     }
});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular-Google-Maps library not loading Angular-google-maps not showing Issues installing angular-google-maps angular-google-maps not updating markers Adding Multiple Markers to Angular-google-maps Angular-google-maps call after $http Angular-Google-Maps not showing marker on map angular-google-maps no api keys Add Marker in Angular-Google-Maps How to do geocoding with angular-google-maps
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM