XML에서 Google지도 V3의 infobox에 HTML을 표시하는 방법

Question

마커 위치를 표시하는 XML 파일의 데이터를 파싱 중이며 그 부분은 훌륭하게 작동합니다. XML 파일의 정보가있는 HTML을 통해 정보 상자에 정보를 추가하려고합니다. 이것이 보이는 방법입니다.

http://www.mesquiteweather.net/images/Annual%20Fatal%20Tornado%20Summaries.png

하지만 내 테스트 페이지로 이동하여 마커를 클릭하면 그것은 그런 식으로 표시되지 않습니다.

http://www.mesquiteweather.net/xml/googlemapkt.html

이

내가이 정보 상자를 생산하기 위해 노력하고 있음을 가지고있는 코드입니다.

<script type="text/javascript"> 

var customIcons = { 
"-1":     "/images/icons/mm_1_white.png", 
"0":     "/images/icons/mm_20_white.png", 
"1":     "/images/icons/mm_20_orange.png", 
"2":     "/images/icons/mm_20_green.png", 
"3":     "/images/icons/mm_20_blue.png", 
"4":     "/images/icons/mm_20_red.png", 
"5":     "/images/icons/mm_20_black.png" 

}; 

var lineColor = { 
"-1":     "#FFFFFF", 
"0":     "#FFFFFF", 
"1":     "#FFA500", 
"2":     "#008000", 
"3":     "#0000FF", 
"4":     "#FF0000", 
"5":     "#000000" 

}; 

var infowindow = new google.maps.InfoWindow(); 

// start here 

    var summary_html = ""; 
    var csummary_html = ""; 
    var total_html = ""; 
    var gmarkers = []; 
    var i = 0; 
    var j = 0; 
    var thisurl = '2013.xml'; 

// this is called from xml processing loop below 
function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) { 
    var marker = new google.maps.Marker({position: point, icon: customIcons[ef]}); 

// this makes the info bubble text/info 
    var yy = dt.substr(-4); 
    if (ef == "-1") { 
     ef = " Not rated yet"; 
      } 
    var html = "<b>" + yy + " Killer Tornado #" + yrnum + "</b> <br/>" + dt + "&nbsp;" + tm + "&nbsp;CST<br/>"; 
     html += "Fatalities: " + dead + ", EF" + ef + "<br/>"; 
     html += "County, State: " + loc + ", " + st + "<br/>"; 
     html += "Home:" + h + " MHome:" + m + " Outside:" + o + " Bldg:" + p + " Vehicle:" + v + " Unk:" + unk + "<br/>"; 
    var ww = watch.substring(2,6); 
    // alert(yy); 

if (watch != "NONE" && yy == 2013) { // update to current yy and change other links below!!! 
link = '<a href="http://www.spc.noaa.gov/products/watch/ww' + ww + '.html" target="_blank">' + ww + '</a>'; 
html += "In SPC Watch# " + link + " (Click to open SPC watch page)<br/>"; 
} 

if (watch != "NONE" && yy >= 2004 && yy <= 2012) { // ww archive back to 2004 
link = '<a href="http://www.spc.noaa.gov/products/watch/' + yy + '/ww' + ww + '.html" target="_blank">' + ww + '</a>'; 
html += "In SPC Watch# " + link + " (Click to open SPC watch page)<br/>"; 
} 

if (watch != "NONE" && yy < 2004) { // No archive! 
//link = '<a href="http://www.spc.noaa.gov/products/watch/' + yy + '/ww' + ww + '.html">' + ww + '</a>'; 
html += "In SPC Watch# " + ww + "<br/>"; 
} 

if (watch == "NONE") { 
html += "No Watch in Effect.<br/>"; 
} 

function getInfoWindowEvent(marker, html) { 
    infowindow.setContent(html); 
    infowindow.open(map, marker); 
} 

     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.close(); 
     getInfoWindowEvent(marker, html); 
     }); 
     } 

// This function picks up the click and opens the corresponding info window 
function myclick(i) { 
     google.maps.event.trigger(gmarkers[i], 'click'); 
     } 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(32.775833, -96.796667); 
    var myOptions = { 
     panControl: false, 
     zoom: 4, 
      mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL, 
     position: google.maps.ControlPosition.RIGHT_TOP 
    }, 
     center: myLatlng,  
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    function MyLogoControl(controlDiv) { 
    controlDiv.style.padding = '5px'; 
    var logo = document.createElement('IMG'); 
    logo.src = 'http://www.mesquiteweather.net/images/watermark_MW_GMap.png'; 
    logo.style.cursor = 'pointer'; 
    controlDiv.appendChild(logo); 

    google.maps.event.addDomListener(logo, 'click', function() { 
     window.location = 'http://www.mesquiteweather.net'; 
    }); 
    } 

    var logoControlDiv = document.createElement('DIV'); 
    var logoControl = MyLogoControl(logoControlDiv); 
    logoControlDiv.index = 0; // used for ordering 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv); 

    downloadUrl(thisurl, function(data) { 
      var markers = data.documentElement.getElementsByTagName("fatalities"); 
      for (var i = 0; i < markers.length; i++) { 
      var yrnum = markers[i].getAttribute("yrnum"); 
      var dt = markers[i].getAttribute("dt"); 
      var tm = markers[i].getAttribute("time"); 
      var ef = markers[i].getAttribute("ef"); 
      var st = markers[i].getAttribute("st"); 
      var loc = markers[i].getAttribute("location"); 
      var watch = markers[i].getAttribute("watch"); 
      var dead = markers[i].getAttribute("deaths"); 
      var h = markers[i].getAttribute("h"); 
      var m = markers[i].getAttribute("m"); 
      var o = markers[i].getAttribute("o"); 
      var v = markers[i].getAttribute("v"); 
      var p = markers[i].getAttribute("p"); 
      var unk = markers[i].getAttribute("unk"); 

      var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("slat")), 
            parseFloat(markers[i].getAttribute("slon"))); 
      var epoint = new google.maps.LatLng(parseFloat(markers[i].getAttribute("elat")), 
            parseFloat(markers[i].getAttribute("elon"))); 

      var marker = createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch); 
      marker.setMap(map); 

      var polyline = new google.maps.Polyline({ 
       path: [point, epoint], 
       strokeColor: lineColor[ef], 
       strokeOpacity: 0.8, 
       strokeWeight: 2 
       }); 

      polyline.setMap(map); 
     } 
    }); 
     } 

    function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) { 
    var marker = new google.maps.Marker({position: point, icon: customIcons[ef]}); 
    google.maps.event.addListener(marker, "click", function() { 
    if (infowindow) infowindow.close(); 
    infowindow = new google.maps.InfoWindow({content: loc}); 
    infowindow.open(map, marker); 
    }); 
    return marker; 

    } 

</script> 

나는이 말에 마지막 기능을 함께 할 수있는 뭔가가 생각하지만 난 그게 옳지 않다 알고 있기 때문에 나는이 붙어 곳은 내가 모든 것을 시도했다. 나는 새로운 Gmaps를 배우는 과정에서 아직 수년 동안 사용하지 않았기 때문에 아직도입니다.

어떤 제안이나 조언도 좋을 것입니다.

- 고마워요!

Answer 1

업데이트 : 두 가지 다른 createMarker 기능이 있습니다. 사용해서는 안되는 것을 제거하거나 이름을 바꾸십시오 (올바른 양식으로 html 변수를 작성하지 않는 것).

에 전달 된 정보를 아무것도하지 않습니다 createMarker 기능 (LOC 제외), 당신은 당신이 원하는대로 포맷, 정보창에 저것을 추가해야합니다

는

function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) { 
var marker = new google.maps.Marker({position: point, icon: customIcons[ef]}); 
google.maps.event.addListener(marker, "click", function() { 
    var contentStr = loc // + other information, formatted as you want... 
    if (infowindow) infowindow.close(); 
    infowindow = new google.maps.InfoWindow({content: contentStr}); 
    infowindow.open(map, marker); 
}); 
    return marker; 

}