How to display HTML in infobox in Google Maps V3 from XML

Question

I am parsing data from a XML file that plots the markers location and that part works great. I am trying to add information to the info box via HTML with info from the XML file. This is how it is suppose to look.

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

But if you go to my test page and click on a marker it doesn't show up that way.

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

This is the code I have that I am trying to produce the info box.

<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>

I think it has something to do with the last function at the end but that is where I am stuck because I know it isn't right and I have tried everything. I am still in the process of learning the new Gmaps as I haven't used them in years.

Any suggestions or advice would be great!

-Thanks!

Answer 1

UPDATE: The issue is that you have two different createMarker functions. Remove or rename the one that shouldn't be used (the one that doesn't create the html variable in the correct form).

Your createMarker function doesn't do anything with the information passed in (except for loc), you need to add that to the infowindow, formatted as you want it to be:

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;

}