Google Maps API 3에서 작동하도록 JSON 가져 오기

Question

마커 데이터를 JSON을 통해 가져옵니다. 난 내 로컬 복사본을 개발할 때 나는 JS 파일에서이 있었고, 그냥 내가 지금 CMS (ExpressionEngine) 상에 사이트를 이동하고

<script src="assets/js/locations.js"></script> 

를 사용하여 전화를 마커 데이터가 동적이기 때문에 나는 JS가 템플릿에 JSON 데이터가 저장됩니다.

내가 지금 로 파일을 포함 할 필요가

<script src="http://domain.com/map/locations"></script> 

여기에 내가 가지고있는 JSON의 예입니다 (어떤 파일 확장자가없는 것을 알). 위치는되지 않습니다 :

var locations = [ 

    [2, 51.39006, -0.02976, 'telecommunications', 'Test 2', '<div><img src="http://localhost/map/assets/graphics/info_window/default.jpg" alt="Test 2" width="105" height="70" style="float:right;"> <p>fdgj fdh uhfj bfd nibjdfjb ndfjn fd vfn vbjdc&nbsp; ifs n ei klmvf.cx fi fskn d</p></div>', '<a href="http://www.yahoo.com" target="_blank">Read more</a>' ], 
    [1, 51.51400, -0.12002, 'transport', 'Test map marker', '<div><img src="{image:url:thumb}" alt="Test map marker" width="{image:width:thumb}" height="{image:height:thumb}" style="float:right;"> <p>eubnglrsk nekfldb jndklvcbv jdnfhl kvbmd klbndvl kbjn dkbnm lkd nbmfljeb ygdjfjn</p></div>', '<a href="http://www.google.com" target="_blank">Read more</a>' ] 

]; 

이

지도 분명히

var markers = []; 

    // Looping through the JSON data 
    for (var i = 0; i < locations.length; i++) { 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      title: locations[i][4], 
      icon: iconSrc[locations[i][3]] 
     }); 
     markers.push(marker); 


     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent("<div class='cont_box' id='" + locations[i][0] + "'>" + "<h2>" +locations[i][4] + "</h2>" + "<div class='cont'>" + locations[i][5] + "</div><div style='clear:both;'></div><div class='link'>" + locations[i][6] + "</div></div>"); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

    }// END for loop 

나는 CMS에 의해 렌더링 된 JSON 데이터를 참조 할 때 내가 오류에 대한 마커 루프

ReferenceError가이 ::입니다 정의

URL이 유효합니다. JS 파일을 사용할 때처럼 URL이 유효하지 않습니다.

지도 JS 코드 자체 내에서 파일을 호출하는 것이 더 나은지 잘 모르겠습니다. 나는이 작품이 큰

Answer 1

나는이 개 아이디어를 가지고있다. 스크립트 태그

1. 이 유형을 선언 (전체 페이지가 HTML5 경우, 당신은 알고 있습니까?) :
   :

<script type="text/javascript" src="http://domain.com/map/locations"></script> 

내 다른 생각은 코드에서 데이터를로드하는 것입니다

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://domain.com/map/locations', true); 
xhr.onload = function() {load you markers here} 
}; 
xhr.send(); 

Answer 2

당신이지도를 만드는 스크립트 소스 전에, 당신의 HTML 스크립트에서, 당신은 "locations.js"스크립트를 소싱하고 있는지 확인 될 만들 수있는 방법에 대한

어떤 제안. 방화 광구 또는 크롬 콘솔을 사용하여 브라우저에서 두 스크립트가 제대로로드되었는지 확인하십시오.

이러한 스크립트를로드하는 HTML 스 니펫을 보는 것이 도움이됩니다.

또한

, 당신은 쓸 찾으 셨나요?

<script src="http://domain.com/map/locations.js"></script> 

을 대신 위 :

<script src="http://domain.com/map/locations"></script>