2016-07-07 6 views
0

나는 세트로 구글 맵 출력을 표시하는 페이지가 페이지 설정 (40 +) 사용자 정의 마커, (이) 기존 시스템의 재개발이다 (그러나 제대로 코딩.Google지도 API는 빈 출력

내 문제는지도가 출력되지 않으며, <div id='map'> 안에 콘텐츠가 없습니다. 브라우저 콘솔에 오류가 없으므로이 문제에 접근하는 방법과 관련하여 손실이 조금 있습니다.

나는 다양한 의견을 남겼습니다. 내 코드의 일부 (예 : 마커 배치)도 수정하지 않는 것 같습니다.

페이지 코드 :

,
<!DOCTYPE html> 
<head> 

<script type="text/javascript"> 
     function initMap() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 11, 
     /*  mapTypeId: google.maps.MapTypeId.ROADMAP,*/ 
       center: {lat: 52.345617, lng: 1.502666} 
      }); 

     /** setMarkers(map);**/ 

     /*** 
      infowindow = new google.maps.InfoWindow({ 
       content: "holding..." 
      });**/ 
     } 

     /*** map still loads blank even when commenting all the below JS **/ 
     /*** 
     var places = [ 
      // Name | lat | long | order | infoWindowDescr 
      ['Dud Data', 52.3283777, 1.6753005, 12, 'some descriptive text'] 
      <?php 
      //this PHP is a working Javascript array of marker data 
      // disabled for testing but seems ok. 
      //print $placesOutput; 
      ?> 
     ]; 

     function setMarkers(map) { 
      // Adds markers to the map. 

      for (var i = 0; i < places.length; i++) { 
       var business = places[i]; 

       var marker = new google.maps.Marker({ 
        title: business[0], 
        position: {lat: business[1], lng: business[2]}, 
        map: map, 
        zIndex: business[3] 
       }); 
       google.maps.event.addListener(places, 'click', function(){ 
        infowindow.setContent(business[4]); 
        infowindow.open(map, this); 
       }) 
      } 
     } 
     **/ 
    </script> 
    <script type="text/javascript" defer async 
      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap"> 
    </script> 
</head> 

<body> 
    <div id='map' style='height:500px;width:500px;'></div> 
</body> 
</html> 

지금까지 시도했습니다 무엇 :

소스 코드는 구글 개발자 문서 here 다양한 관련 구글 페이지에서입니다. 다중 표식 info window에 대한 코드는 다른 사이트에서 작성되었습니다.

은 내가 this question, this questionthis question을 읽고 - 세 번째 질문은 기능이 설정 한 후, API에 대한 참조가 왔다 있도록 내 코드 순서를 일으켰습니다.

  • 나는 브라우저 (파이어 폭스/크롬)에 콘솔에서 NO 오류가; 자바 스크립트 오류가없는 것 같습니다.

  • 현재 PHP 데이터없이 테스트 중이므로 2 번 질문은 여기에 적용되지 않습니다.

  • API 키가 올바르게 작동합니다.

  • DIV 요소 앞뒤에 코드를 삽입하고 자바 스크립트 코드를 재정렬하려고했지만 변경하지 않았습니다.

  • places 배열, setMarker 함수 및 infoWindow 함수를 비활성화해도 작동하지 않습니다.

  • 페이지에서 실행중인 다른 자바 스크립트가 없습니다.

나는 간단 뭔가 확신하지만 난 그것을 볼 수 없습니다 ....

+0

'# map' 요소가 존재하기 전에'initMap' 함수가 호출되었을 가능성이 큽니다. '