2012-05-17 2 views
0

Google에서 내 zf 앱에 다음 샘플 코드를 추가해 보았습니다. 내보기에zend framework에서 작동하는 google maps api v3을 얻을 수 없습니다.

<style type="text/css"> 
    html, body, #map_canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 
</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var map; 
    function initialize() { 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     myOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

: 머리 부분에
나는지도가 표시를하지 않으면

<div id="map_canvas"></div> 

내가, 레이아웃 스크립트를 사용하고 있지만, 내 레이아웃을 사용하면 사라집니다. 아무도 나에게 무슨 일이 일어나는지 말해 줄 수 있니?

+1

어떤 에러? –

+0

레이아웃 스크립트를 사용하지 않으므로지도가 작동한다는 것을 의미하므로 충돌하는 스크립트의 내용이어야하지만 정보를 제공하지 않았습니다. 나는 추측 할 수있다 (사실 나는 그 이유를 상당히 확신하고있다). 그러나 나는 오히려 그럴 필요가 없다. –

답변

0

좋아, 알아 냈어. 정말 CSS 문제였습니다. 페이지 콘텐츠 주변에 컨테이너 div가 있습니다. 최소 높이를 600px로 설정했습니다. Google 예제의 CSS에는 html과 body가 100 % 높이로 설정되어 있습니다. 컨테이너 높이를 100 %로 변경하고 해결했습니다.