내 콘텐츠 문자열을 js 파일의 데이터에 연결

Question

방금지도를 완성했으며 콘텐츠 문자열이 js 파일의 데이터를 가져 와서 마커 정보 상자에 추가하려고합니다. 간단한 infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+data.name); 쿼리로 작업했습니다. 하지만 지금은 탭을 만들었고 각자가 map.js 파일에서 다른 데이터를 읽도록 요구합니다. 지금까지

내 코드 :

window.onload = function() { 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
      center : new google.maps.LatLng(51.50746, -0.127594), 
      zoom : 10, 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
      }); 

    var contentString = '<div id="content">'+ 
    '<h1>'+'</h1>'+ 
    '<p><b>Test</b>' 
    '</div>'; 

    var contentString2 = '<div id="content">'+ 
    '<h1>Info</h1>'+ 
    '<p><b>Info</b>' 
    '</div>'; 

    var contentString3 = '<div id="content">'+ 
    '<h1>More</h1>'+ 
    '<p><b>More</b>' 
    '</div>';     

      // Creating a global infoBox object that will be reused by all markers 
    infoBubble = new InfoBubble({ 
     minWidth: 300, 
     maxWidth: 300, 
     minHeight: 150, 
     maxHeight: 350, 
     arrowSize: 50, 
     arrowPosition: 50, 
     arrowStyle: 2, 
     borderRadius: 10, 
     shadowStyle: 1, 
    }); 

    var div = document.createElement('DIV'); 
    div.innerHTML = 'test 101'; 

    infoBubble.addTab('Details', contentString); 
    infoBubble.addTab('Info', contentString2); 
    infoBubble.addTab('More', contentString3); 


    // Custom Markers 
    var markers = {}; 
     var categoryIcons = { 
     1 : "images/liver_marker1.png", 
     2 : "images/liver_marker2.png", 
     3 : "images/liver_marker3.png", 
     4 : "images/liver_marker4.png", 
     5 : "images/liver_marker5.png", 
     6 : "images/liver_marker6.png", 
     7 : "images/liver_marker.png" 
     } 

    // Looping through the JSON data 
    for (var i = 0, length = json.length; i < length; i++) { 
     var data = json[i], 
     latLng = new google.maps.LatLng(data.latitude, data.longitude); 


     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
       position : latLng, 
       map : map, 
       title : data.title, 
       icon : categoryIcons[data.category] 
      }); 

     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
     (function (marker, data) { 

      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, 'click', function(e) { 
       //infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+data.name); 
       infoBubble.open(map, marker); 
       map.panTo(loc); 
}); 

     })(marker, data); 

    } 

} 

})(); 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

내 JS 파일의 샘플 : 이 contentString2는 "이름"을 찾아이

var json = [{ 
     "name" : "Acton Street", 
     "latitude" : 51.52834, 
     "longitude" : -0.118619, 
     "description" : "Leaf", 
     "category" : 7 
    }, { 
     "name" : "Aldermans Hill", 
     "latitude" : 51.618522, 
     "longitude" : -0.11167, 
     "description" : "Pod", 
     "category" : 7 
    }, { 
     "name" : "Aldermans Hill", 
     "latitude" : 51.618522, 
     "longitude" : -0.11167, 
     "description" : "Turner", 
     "category" : 7 
    },{ 
     "name" : "Alexandra Road/Holloway Street CP", 
     "latitude" : 51.469744, 
     "longitude" : -0.363063, 
     "description" : "Box", 
     "category" : 7 
    }] 

은 기본적으로 contentString은 "설명"을 찾아 가지고는 및 contentString3 보면 "위도"와 "경도"에 대해

머리를 좋아할 것입니다.

건배

Answer 1

updateTab을 사용해 보셨습니까?

//update the first tab content 
infoBubble.updateTab(0, 'Details', 'new content'); 

는 또한 id 속성은 고유해야합니다 몇 가지 예

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/에서보세요. 지금 당장 모든 콘텐츠 div는 동일한 id입니다.