Google-Karte zeigt nicht bei Verwendung von ui-Router

Question

Ich habe versucht, Google-Map zu meinem AngularJS Projekt von diesem Link

und es funktioniert gut, ohne Zustand (ui-Router) anzuwenden, aber wenn ich versuchte, es zu setzen in mein Projekt, das mehrere Staaten hat, Karte zeigt nicht, aber ... es für einen Ort und Länge erhalten sucht, Breite, wie Sie im Bild

Hier ist ein Teil meines Code

sehen

Service: app.js

myApp.service('Map', function($q) { 

    this.init = function() { 
     var options = { 
      center: new google.maps.LatLng(40.7127837, -74.00594130000002), 
      zoom: 13, 
      disableDefaultUI: true  
     } 
     this.map = new google.maps.Map(
      document.getElementById("map"), options 
     ); 
     this.places = new google.maps.places.PlacesService(this.map); 
    } 

    this.search = function(str) { 
     var d = $q.defer(); 
     this.places.textSearch({query: str}, function(results, status) { 
      if (status == 'OK') { 
       d.resolve(results[0]); 
      } 
      else d.reject(status); 
     }); 
     return d.promise; 
    } 

    this.addMarker = function(res) { 
     if(this.marker) this.marker.setMap(null); 
     this.marker = new google.maps.Marker({ 
      map: this.map, 
      position: res.geometry.location, 
      animation: google.maps.Animation.DROP 
     }); 
     this.map.setCenter(res.geometry.location); 
    } 

}); 

Controller: app.js

myApp.controller('VenueController', function(Map,$rootScope, $scope, $auth, $state, $http) { 

Map.init(); 

$scope.place = {}; 

$scope.search = function() { 
    $scope.apiError = false; 
    Map.search($scope.searchPlace) 
    .then(
     function(res) { // success 
      Map.addMarker(res); 
      $scope.place.name = res.name; 
      $scope.place.lat = res.geometry.location.lat(); 
      $scope.place.lng = res.geometry.location.lng(); 
     }, 
     function(status) { // error 
      $scope.apiError = true; 
      $scope.apiStatus = status; 
     } 
    ); 
} 
}); 

HTML

: venue.html

<div style="margin-top:20px;"> 
    <label> Location : </label> 
    <form name="searchForm" novalidate ng-submit="search()"> 
    <div class="input-group"> 
     <input name="place" type="text" class="form-control" 
     ng-model="searchPlace" required autofocus /> 
     <span class="input-group-btn"> 
      <button class="btn btn-primary" 
      ng-disabled="searchForm.$invalid">Search</button> 
     </span> 
    </div> 
</form> 

<div id="map"></div> 

<form name="resForm" class="form-horizontal" novalidate 
ng-submit="send()"> 
    <div class="form-group"> 
     <label for="resName" class="col-xs-2 control-label">Name</label> 
     <div class="col-xs-10"> 
      <input name="resName" type="text" class="form-control" 
      ng-model="place.name" required /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="resLat" class="col-xs-2 control-label">Latitude</label> 
     <div class="col-xs-10"> 
      <input name="resLat" type="number" class="form-control" 
      ng-model="place.lat" required /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="resLng" class="col-xs-2 control-label">Longitude</label> 
     <div class="col-xs-10"> 
      <input name="resLng" type="number" class="form-control" 
      ng-model="place.lng" required /> 
     </div> 
    </div> 

Sorry, wenn der Code, den ich Ihnen zeigen, schwierig ist

Bitte helfen Sie, Dank zu lesen im voraus

Answer 1

Wenn die div enthält Karte, oder es ist Elternteil, oder es Elternteil (jeder DOM Vorgänger) hat display:none Stil (was ich vermutet passiert, wenn Sie Staaten ändern: Sie verbergen einige Ansichten und andere anzeigen) die Kartenansicht wird nicht richtig initialisiert. Sie müssen das Ereignis resize auf der Karte auslösen, wenn sich die Sichtbarkeit ändert. (Ich denke, das ist in Ihrem Fall geschieht, aus dem Screenshot zu urteilen Sie zur Verfügung gestellt, geladen die API sucesfuly, nur die Aussicht ist nicht richtig initialisiert) Fügen Sie einfach diesen Code zum Map Service:

this.resize = function() { 
    if(this.map) google.maps.event.trigger(this.map, 'resize'); 
} 

EDIT

In Ihrem Code befindet sich die Karte innerhalb der div id="addVenue". Daher müssen Sie die Größenänderung direkt nach der Anzeige des Div auslösen. Um dies zu erreichen, fügen Sie diese Funktion, um Ihre VenueController:

$scope.mapresize = function(){ 
    setTimeout(function(){ Map.resize(); }, 10); 
} 

Und es in der venue.html Ansicht aufrufen, wenn Sie im Begriff sind, die addVenue div angezeigt werden soll. Finden Sie eine Linie mit Link auf href="#addVenue" und ändern Sie es wie folgt aus:

<div class="sm-st clearfix" href="#addVenue" ng-click="mapresize()" data-toggle="tab"> 

AUCH !! Es gibt ein weiteres Problem mit Ihrer Anwendung. In style.css ENTFERNEN Sie diese 3 Zeilen:

img { 
    max-width: 100% !important; 
} 

Sie verursachen Google Maps nicht ordnungsgemäß funktionieren. Da Google Maps Bilder intern verwendet und wenn Sie diese Einschränkung hinzufügen, werden sie brechen.