Связывание моего contentstring с данными в файле js

Question

Я только что закончил карту и хочу, чтобы contentstring получал данные из моего 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 файла:

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 искать "описание" имеют contentString2 ищут "имя" и contentString3 выглядеть для «широты» и «долготы»

Хотел бы нанять голову на этом.

Приветствия

Answer 1

Вы пробовали updateTab?

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

Посмотрите на некоторые примеры http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

Также обратите внимание, что id свойство должно быть уникальным. Как сейчас, все ваши контентные divs имеют то же самое id.