Изменение размера и центра карты Google

Question

В зависимости от состояния моего приложения я хочу, чтобы мой холст карты google имел разный размер, я меняю размер с помощью ng-класса. Когда я вызываю ToggleExploreMap(), размер моей карты google изменяется, но setCenter не применяется должным образом. Позиция меняется, но она не изменяется на моем маркере, но она сдвигается в верхнюю левую часть положения маркера.

Это ошибка?

Посмотрите эту скрипку для примера видимого поведения. Если вы нажмете кнопку изменения размера, карта будет изменена, но вам нужно щелкнуть второй раз, чтобы на самом деле карта была сосредоточена на маркере. http://jsfiddle.net/bkogdfva/1/

Контроллер

var exploreMap = new google.maps.Map(document.getElementById("map_explore_canvas"),myOptions); 
    var $scope.ExploreMapStyle = "map_explore_canvas";  

     //Click Handlers 
     $scope.ExploreDetails = function(marker){ 
     ToggleExploreMap(); 
     google.maps.event.trigger(exploreMap, 'resize'); 
     exploreMap.setCenter(marker.position); 
     }; 

     function ToggleExploreMap(){ 
     if(exploreMode === "explore"){ 
      $scope.ExploreMapStyle = "map_explore_detail"; 
      exploreMode = "detail"; 
     } 
     else{ 
      $scope.ExploreMapStyle = "map_explore_canvas"; 
      exploreMode = "explore"; 
     } 
     }; 

HTML-

<div id="map_explore_canvas" ng-class="ExploreMapStyle"></div> 

CSS-

.map_explore_canvas{ 
    width:1080px; 
    height:500px; 
} 

.map_explore_detail{ 
    width:400px; 
    height:400px; 
} 

Answer 1

ваша проблема <divid="map_explore_canvas" ng-class="ExploreMapStyle"></div>

Вы ссылаетесь DIV по ID так что ваш CSS должен быть как сильфона

#map_explore_canvas{ 
    width:1080px; 
    height:500px; 
} 

простой способ запомнить

# означает ID
. означает класс

и другая проблема

HTML Заменить

<div id="ExploreMapArea"> 

Для

<div id="map_explore_canvas"> 

и в CSS

Заменить .ExploreMapArea{....} на #map_explore_canvas{....}