Google지도 xl 데이터가 포함 된 탭 정보 창

Question

내 스크립트에서 탭 정보 창을 추가하고 싶지만 작동하지 않습니다. 작동하지 않습니다. PLZ .... 내가 문자열과 작동 이벤트 리스너를 삽입해야합니다 어디 잘 모릅니다 ..이 내 코드입니다

.. 내가 그것을 위해 할

var gmarkers = []; 
     var gicons = []; 
     map = null; 
var infowindow = new google.maps.InfoWindow(
    { 

content: contentString 

    }); 

    var iconImage = new google.maps.MarkerImage('images/intake.png', 

     new google.maps.Size(20, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(9, 34)); 

    var iconShadow = new 

google.maps.MarkerImage ('HTTP 도움 : //www.google.com/mapfiles/shadow50.png ',

 new google.maps.Size(37, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(9, 34)); 
    var iconShape = { 

     coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0], 
     type: 'poly' 
    }; 

    var contentString = [ // this my strings 

     '<div id="tabs">', 
     '<ul>', 
     '<li><a href="#tab-1"><span>One</span></a></li>', 
     '<li><a href="#tab-2"><span>Two</span></a></li>', 
     '<li><a href="#tab-3"><span>Three</span></a></li>', 
     '</ul>', 
     '<div id="tab-1">', 
     '<p>Tab 1</p>', 
     '</div>', 
     '<div id="tab-2">', 
     '<p>Tab 2</p>', 
     '</div>', 
     '<div id="tab-3">', 
     '<p>Tab 3</p>', 
     '</div>', 
     '</div>' 
    ].join(''); 

     // A function to create the marker and set up the event window 

function createMarker(latlng,name,html,category) { 

    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     icon: gicons[category], 
     shadow: iconShadow, 
     map: map, 
     title: name, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }); 
     // === Store the category and name info as a marker properties === 
     marker.mycategory = category;         
     marker.myname = name; 
     gmarkers.push(marker); 

    google.maps.event.addListener(infowindow, 'domready', function() { //this my tab listener 
     $("#tabs").tabs(); 
    });  

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     }); 

     // == shows all markers of a particular category, and ensures the checkbox is checked == 
     function show(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(true); 
      } 
     } 
     // == check the checkbox == 
     document.getElementById(category+"box").checked = true; 
     } 
// == hides all markers of a particular category, and ensures the checkbox is cleared == 
     function hide(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(false); 
      } 
     } 
    // == clear the checkbox == 
     document.getElementById(category+"box").checked = false; 
     // == close the info window, in case its open on a marker that we just hid 
     infowindow.close(); 
     } 
     // == a checkbox has been clicked == 
     function boxclick(box,category) { 
     if (box.checked) { 
      show(category); 
     } else { 
      hide(category); 
     } 
     } 
     // == rebuilds the sidebar to match the markers currently displayed == 
    function initialize() { 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(40.0000, 48.0000), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
google.maps.event.addListener(map, 'click', function() { 

     infowindow.close(); 

     }); 

// Read the data 

     downloadUrl("xml/cat.xml", function(doc) { 

    var xml = xmlParse(doc); 

    var markers = xml.documentElement.getElementsByTagName("marker"); 
for (var i = 0; i < markers.length; i++) { 
      // obtain the attribues of each marker 
      var lat = parseFloat(markers[i].getAttribute("lat")); 
      var lng = parseFloat(markers[i].getAttribute("lng")); 
      var point = new google.maps.LatLng(lat,lng); 
     var address = markers[i].getAttribute("address"); 
      var name = markers[i].getAttribute("name"); 
      var html = "<b>"+name+"<\/b><p>"+address; 
      var category = markers[i].getAttribute("category"); 
      // create the marker 
      var marker = createMarker(point,name,html,category); 
     } 
    // == show or hide the categories initially == 
     show("intake"); 
     hide("reservoir"); 
     hide("wsps"); 
     show("wtp"); 
     hide("wwps"); 
     hide("wwtp"); 
     // == create the initial sidebar == 
     }); 

Answer 1

당신은 그것의 정의 전에 contentString을 언급하는 장소

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

.

var contentString=....