2014-01-21 3 views
0

일련의 마커가 포함 된 Google지도 (Google Maps JavaScript API 통해)를 표시하는 ASP.NET webforms 페이지를 만들고 있습니다.document.getElementById가 ASP.NET 양식의 요소를 찾지 못했습니다.

이. 내가 DON "T<form> 태그 안에 <div id="map-canvas">를 넣으면 완벽하게

작동하지만이 <form> 내부 <div id="map-canvas">를 이동하면 난 그냥 (오류없이) 빈 페이지를 얻을.

찾고 검사기의 빈 페이지에서 마치 <div id="map-canvas">에지도를 표시하기위한 일부 기본 요소가 채워지지만 (마커 제외) 페이지에 아무 것도 표시되지 않는 것 같습니다.

<form id="form1" runat="server">에 동적으로 생성 된 ID로 인해 DOM을 걷는 데 문제가있는 document.getElementById이 원인 일 수 있습니까?

참고 : 제공된 코드는 테스트 용 페이지 일뿐입니다. 일단 그것이 정렬되면 ASP.NET MasterPage를 사용하게 될 것입니다.

CSS

<style type="text/css"> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

스크립트

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 
     var latlngCenter = new google.maps.LatLng(30.000000, -100.000000); 
     var mapOptions = { zoom: 3, center: latlngCenter } 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     var latlngPlaceOne = new google.maps.LatLng(-30.000000, 150.000000); 
     var markerPlaceOne = new google.maps.Marker({ 
      position: latlngPlaceOne, 
      map: map, 
      title: 'Place One' 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

HTML

<body> 
    <form id="form1" runat="server"> 
     <div id="map-canvas"></div> 
    </form> 
</body> 
+0

ASP 소스 대신 렌더링 된 HTML을 게시 할 수 있습니까? – Schien

+0

ClientIDMode = "Static"을 추가하여 양식의 서버 측과 클라이언트 측에서 ID가 같아 지도록 할 수 있습니다. 그러나 코드에서는 div가 서버 컨트롤이 아니므로 문제가되지 않습니다. –

+0

@KrishnanunniJeevan 양식이 마스터 페이지에 있고 약 150 개의 다른 페이지에 사용되므로 ClientIDMode = Static을 사용하고 싶지 않습니다. – Dhaust

답변

2

나는 당신의 예제를 시도해 보았고 작은 수정으로 작동했다 : 폼이 크기가 "축소되어"맵이 보이지 않을 수도있다. 이 도움이

<style> 
    html, body, form, #map-canvas { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 

희망 : 나는 (거의 this 예에서 가져온) 다음과 같은 스타일을 추가했습니다.

+0

죄송합니다, 이미 내 페이지에 CSS가 있지만 hadn 질문에 게시되지 않았습니다. – Dhaust

+0

@DavidHAust 그렇다면'document.getElementById'와는 아무런 관련이 없다고 생각합니다. 코드를 복사하여 새로 만든 페이지 (Clean WebForms 프로젝트)에 코드를 붙여 넣었습니다. – volpav

+0

DOH, 죄송합니다. 거기에 'form'이 완전히 빠졌습니다. 양해 해 주셔서 감사합니다. – Dhaust

관련 문제