Google지도 API - 신비한 백색 "지도"로드시의 팝업

Question

UPDATE2 : 문제를 발견했습니다. 나는 * {width : 100 %; height : 100 %}를 CSS 파일 상단에 놓습니다. 이것은 전체지도를 망쳤습니다. 이것을 제거하면 문제가 해결됩니다.

업데이트 : 내 문제를 표시하기 위해 CodePen을 사용할 수있었습니다. 하단의 탐색 바에서 왼쪽의 두 번째 상자를 클릭하기 만하면됩니다. 이 질문에 이미 요구 한 경우

http://codepen.io/anon/pen/CDeBc

나는 사과; 이 문제가있는 것을 찾지 못했습니다.

저는 잠시 동안이 작업을 해왔으며 문제가 무엇인지 파악할 수 없습니다. 여기에 무슨의 이미지입니다 (죄송합니다, 제가 이미지를 게시 할 수 있지 않다가, 그냥 링크) :

http://i.imgur.com/cH8uvLT.png

내가있어 원래 것이 숨겨져 사업부로 설정 "캔버스지도" 버튼을 클릭하면 스케일 (0)에서 스케일 (1)로 움직입니다.

상황은 나는 시도했다 :

• 팝업 애니메이션을 제거.
• 너비와 높이에 절대 값 (예 : 100px)을 사용합니다. 나는 현재 백분율을 사용하고 있습니다.
• div가 애니메이션 된 후 페이지가로드 된 후 내 initMap() 함수를 호출합니다.
• 디스플레이가있는 경우 : 디스플레이가 아닌 초기에 블록 : 없음. 또한 시도한 디스플레이 : 숨김.
• '크기 조정'이벤트 트리거.

내가 원하는대로 작동하지 않는 것은 별도의 HTML 페이지에지도가있는 경우입니다. 처음로드 될 때 ~ 500ms 동안지도가 올바른지 확인한 다음 흰색 "지도"상자가 나타납니다.

HTML :

<div class="content popout" id="content_2"></div> 

CSS :

.content { 
    width: 100%; 
    height: auto; 
    display: none; 
    text-shadow: none; 
} 

/* Map */ 
#content_2 { 
    background-color: red; 
    height: 100%; 
} 

/* Animation for "popping" out an element. Pops out from the middle of the screen. */ 
.popout { 
    animation-name: popout; 
    animation-duration: 500ms; 
    -webkit-animation-name: popout; 
    -webkit-animation-duration: 500ms; 
} 

    @keyframes popout { 
     from { transform: scale(0); opacity: 0; } 
     to { transform: scale(1); opacity: 1; } 
    } 

    @-webkit-keyframes popout { 
     from { -webkit-transform: scale(0); opacity: 0; } 
     to { -webkit-transform: scale(1); opacity: 1; } 
    } 

jQuery를 :

다음

는 CSS와지도 컨테이너의 HTML 마크 업, 그것을 표시하기위한 jQuery를하다

// inside some function 
$("#content_"+(i + 1).toString()).show(); 

if (i + 1 == 2) // #content_2 
    initMap(); 
// end some function 

function initMap() { 
    mapOptions = { 
     center: new google.maps.LatLng(42.9837, -81.2497), 
     zoom: 12, 
    }; 

    map = new google.maps.Map(document.getElementById("content_2"), mapOptions); 
} 

LP가 인정됩니다. 고맙습니다.

코헨은

Answer 1

당신은 당신이 애니메이션으로 수행되면지도에 이벤트의 크기를 조정 트리거 할 필요가있다. 당신이 당신의지도에 중심을 사용하고 또한 경우,이 코드는 도움이 될 것입니다 :

var currCenter = map.getCenter(); //Gets you the center of the map 
google.maps.event.trigger(map, 'resize'); // Trigger the resize event 
map.setCenter(currCenter); //Apply the new center 

는 애니메이션이 완료되고지도 객체가 초기화 된 후이 코드를 사용할 수 있는지 확인합니다. 지도는 다음 초기화되지 않은 경우 당신은 당신의 코드를 사용하여 다시 초기화해야합니다 :

map = new google.maps.Map(elem, mapOptions); 

elem이 map-canvas 요소입니다. 이 시도.

업데이트 : : 정확히 해결책은 아니지만 문제를 해결하기위한 해킹입니다.

#content_2 .gm-style>div:first-child{z-index:initial!important;} 

위 스타일을 귀하의 스타일로 추가하십시오.

문제에 대한 코드를 자세히 살펴야합니다. :) 코덱 업데이트 : http://codepen.io/anon/pen/pcwir