2010-07-10 6 views
8

Google지도에서 "Doctype"을 사용하면 Google지도가 제대로 표시되지 않을 수 있습니다.Google지도가 XHTML Doctype (문서 유형)으로 작동하지 않습니다.

최근의 경우,이 "Doctype"은 아무런 생산성도없이 2 일을 보냈습니다. 끔찍한 사건 이니? 이번에는 동료 (Subhankar Bannerjee)에게 도움을 받았으며, 그의 도움으로 적시에 & 효율적인 도움으로 많은 도움을 받았습니다. 그는 또한 그가 여러 번 직면했던이 같은 문제에 관해 언급했다.

누구든지 Google 맵에서이 Doctype 문제가 발생하는 이유를 말씀해주십시오.

도움을 주시면 대단히 감사하겠습니다. (@Balus의 코멘트)

편집 : -
내가 모질라 FF & Google 크롬 브라우저의 (X) HTML 1.0 변형되는 문서 유형, 사용되었다. 아직 IE v6 +에서 Google지도를 확인하지 않았으므로 해당 브라우저에 대해서는 언급 할 수 없습니다.

+1

정확히 doctype은 무엇입니까? 정확히 어떤 웹 브라우저인가? http://hsivonen.iki.fi/doctype/을 알고 있습니까? – BalusC

+0

@Balus - 제공되는 좋은 링크. 감사합니다 –

+2

http://stackoverflow.com/questions/2127601/doctype-error-with-googlemaps – iamgopal

답변

16

얼마 전에 나는 Google Maps API v3과 동일한 문제가 있었으며 디버깅하기 쉽지 않았 음을 말해야합니다.

페이지에서 DOCTYPE을 사용하지 않으면 페이지가 단조 모드로 렌더링됩니다. 기본적으로 추가 CSS 나 JavaScript없이 스타일을 사용할 수 있습니다.

<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 

그러나 페이지가 DOCTYPE 같은 렌더링되는 DOCTYPE로 이렇게 말한다 :이 경우지도를로드하기 위해이 비트를 사용할 수 있습니다. 위와 같은 스타일을 설정하는 것은 백분율을 사용하기 때문에 추가 CSS 없이는 작동하지 않습니다. 요소에는 크기가 없으므로 100 % 아무것도 사용하지 않게됩니다. 그래서 XHTML 1.0 Strict를 사용한다면, 즉. 당신은 CSS에서 그 또한 할 수

<body onload="initialize()"> 
    <div id="map_canvas" style="width:500px; height:400px"></div> 
</body> 

: 당신은 백분율 대신 픽셀을 사용하는 경우는 같은

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> 

페이지를 렌더링합니다.

그래서 옵션 현재 위치 :

  1. 는 폭과 CSS를 통해 높이를 지정하는 DOCTYPE을두고 백분율 대신 또는의 픽셀을 사용합니다.

  2. DOCTYPE을 제거하고 백분율을 사용하십시오. 이것은 문서가 항상 렌더링되어야하는 DTD를 말해야하므로 권장되지 않습니다.

당신은 브라우저가 DTD의 부족에 어떻게 반응하는지 다른 보여주는 테이블도있다 here.에서 쿼크 모드에 대한 자세한 정보를 찾을 수 있습니다.

+1

100 % +1을 위해이 CSS를 사용하십시오 - map {width : 500px; 높이 : 500px; 위치 : 고정! 중요; 왼쪽 : 0; z- 색인 : 1; 0,} –

+0

지도 객체'document.getElementById ("google-map")을 만들기 전에 이것을 사용하십시오. style.height = $ (window) .height() + 'px';' – kushpf

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

이 doctype을 사용하고 있는데 문제가없는 것 같습니다. 그것은 단지 당신의 부트 스트랩일지도 모릅니다. 어떻게 Google을로드하고 있습니까? 어떤 오류가 있습니까? 어떤 종류의 결과를 표시하고 있습니까?

0

"Doctype '을 (를) 사용하는 경우 귀하의 질문에" 전에는 그렇게하지 않았습니까? 전에 본 적이 없다면 본질적으로 웹 페이지 배치 방법에 대한 '규칙'을 변경하고 있습니다. 적절한 doctype이 없다면, 당신은 quirks 모드에있다.

0

빠른 해결책은 다음과 같이 사용하는 수 :

document.getElementById("google-map").style.height = $(window).height()+'px';

그것은 doctype이 꽤 잘 작동 var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

전에. 시도하고 테스트! :)

관련 문제