Как отображать HTML в инфобоксах в Картах Google V3 из XML

Question

Я анализирую данные из XML-файла, который отображает расположение маркеров, и эта часть отлично работает. Я пытаюсь добавить информацию в информационное окно через HTML с информацией из файла XML. Вот как это должно выглядеть.

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), вам нужно добавить, что в InfoWindow, отформатированные, как вы хотите, чтобы это было:

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; 

}