Google지도 jquery.mobile :지도 캔버스의 크기를 올바르게 조정하는 방법?

Question

지도가 필요한 jquery 모바일 앱을 쓰고 있습니다.

지도의 경우 Google지도 서비스를 사용할 계획입니다.

이

<script> 
$('#page-map').live('pagecreate', function(event) { 
    var map = $('#map_canvas').gmap({ 
     ... 
    }); 
    ... 
    $(window).resize(function() { 
     $('#map_canvas').width($(window).width()); 
     $('#map_canvas').height($(window).height()); 
    }); 
)}; 
</script> 

문제 : (이 코드가 제대로 장치가 회전지도 캔버스의 크기를 조절하지만 JQuery와 모바일 크기 조정과 같은) 인

방향 변화를 설명하기 위해

는, 내가 좋아하는 뭔가를 사용하려고 건너 뛰었습니다 (예 : URL 표시 줄이 표시됨). 이 같은

조차에 추가되지 않음 ") ((크기 조정 기능 {"코드 뭔가 :

google.maps.event.trigger(map, 'resize'); 

어떤 도움이다

UPDATE :. 문제는 단지에서만 발생 모바일 장치 나는 삼성 갤럭시 미니 (GT-S5570), 안드로이드 2.3.4 (진저 브레드) 내 페이지를 테스트하고있다. 아니야이 데스크톱 PC에서 창 크기를 조정할 때 발생하지 않는다. (예 : 데스크탑 브라우저의 map_canvas가 올바르다. th가없는 경우에도 브라우저 창이 확대 될 때 채워짐 전자의 크기를 조정()

Answer 1

나는
나는 dimencion와 DIV 내부의 map_canvas을 추가 모바일 JQuery와 내지도에 CSS를 통해 크기를 지정) ... 단지 인해 map_canvas에 100 % 너비/높이에 바인딩 deuin이 ​​경우 100 %

CSS

#map_content { 
padding: 0px; 
width: 100%; 
height: 100%; 
overflow: hidden;} 


#map_canvas { 
width: 100%; 
height: 100%; 
padding: 0; 
text-shadow: none;} 

HTML에서 원하는

  <div data-role="content" id="map_content" data-theme="a"> 
      <div id="map_content"> 
       <div id="map_canvas"></div> 
      </div> 
     </div> 

Answer 2

나는 (위의 많은 다른 플러스) 위의 대답을 시도했지만 아무것도 나를 위해 일했다. 사실 jQuery Mobile을 사용할 때까지는 위의 코드가 저에게 효과적이었습니다. 어떻게 든 jQuery Mobile을로드 할 때 (funnily, 나는 그것이 JS, CSS가 아니라는 것을 알아 차렸다) map_canvas는 높이가 없다 (요소의 높이를 확인하기위한 트릭은 border: 1px solid red;과 같은 테두리를 추가하는 것이다).

결국, 나는 자동 크기 조정을 해결하기 위해 관리하는 경우 다음 코드/CSS를 사용하여 방향 변경 :

<div data-role="page" id="pageID"> 
    <div role="main" class="ui-content"> 
     <div id="map_canvas"> 
     </div> 
    </div> 
</div> 

을 그리고 CSS에서 : 기본적으로 그래서

html, 
body, 
#pageID { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.ui-content { 
    padding: 0; 
} 
.ui-content, 
.ui-content #map_canvas { 
    height: inherit; /* the trick */ 
} 

: 이 나를 위해 문제를 해결했습니다.

크레딧 : https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250

나는 그것이 도움이되기를 바랍니다!