Question

Looking for a second set of eyes here…

I am calling this function:

customPanel(map, "map2", dirn, document.getElementById("path2"), 1);

In customPanel, I am then building html, then trying to assign it to the page:

Here is the function, the innerHTML is near the very bottom. If I throw an alert before I try to assign the html to the innerHTML of div, it alerts correctly:

<script type="text/javascript">

var map = "";
function customPanel(map, mapname, dirn, div) {
    var html = "";

    function waypoint(point, type, address) {
        var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
        html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
        html += '  <tr style="cursor: pointer;" onclick=' + target + '>';
        html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
        html += '      <img src="http://maps.gstatic.com/intl/en_us/mapfiles/marker_green' + type + '.png">'
        html += '    <\/td>';
        html += '    <td style="vertical-align: middle; width: 100%;">';
        html += address;
        html += '    <\/td>';
        html += '  <\/tr>';
        html += '<\/table>';
    }

    function routeDistance(dist) {
        html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
    }

    function detail(point, num, description, dist) {
        var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
        html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
        html += '  <tr style="cursor: pointer;" onclick=' + target + '>';
        html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
        html += '      <a href="javascript:void(0)"> ' + num + '. <\/a>';
        html += '    <\/td>';
        html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
        html += description;
        html += '    <\/td>';
        html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
        html += dist;
        html += '    <\/td>';
        html += '  <\/tr>';
        html += '<\/table>';
    }

    function copyright(text) {
        html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
    }
    // === read through the GRoutes and GSteps ===       
    for (var i = 0; i < dirn.getNumRoutes(); i++) {
        if (i == 0) {
            var type = "A";
        } else {
            var type = "B";
        }
        var route = dirn.getRoute(i);
        var geocode = route.getStartGeocode();
        var point = route.getStep(0).getLatLng();
        // === Waypoint at the start of each GRoute
        waypoint(point, type, geocode.address);
        routeDistance(route.getDistance().html + " (about " + route.getDuration().html + ")");
        for (var j = 0; j < route.getNumSteps(); j++) {
            var step = route.getStep(j);
            // === detail lines for each step ===
            detail(step.getLatLng(), j + 1, step.getDescriptionHtml(), step.getDistance().html);
        }
    }
    // === the final destination waypoint ===   
    var geocode = route.getEndGeocode();
    var point = route.getEndLatLng();
    waypoint(point, "B", geocode.address);
    // === the copyright text ===
    copyright(dirn.getCopyrightsHtml());
    // === drop the whole thing into the target div
    div.innerHTML = html;
}
</script>

EDIT:

Here is the HTML as requested. It’s just two divs:

<div class="mapWrapper">
    <div  id="path2"> </div>
    <div  id="map2"> </div> 
</div>

To clarify, the path2 and map2 are being generated dynamically by looping through $_POST values in PHP. Here is a snippit:

foreach($post_entries as $e){
echo "
<div class=\"mapWrapper\">
  <div  id=\"path" . $increased_counter ."\"> </div>
  <div  id=\"map" . $increased_counter ."\"> </div> 
</div>";
}

EDIT #2
As requested by @user1090190, a public version of the page:
http://qxxiv6yc.myutilitydomain.com/trip-planned

Answer 1

I suspect that path2 has not already been loaded when you call that function. It doesn’t matter that you’re generating it via PHP. You have to wait for the DOM to load in the browser first before you can reference specific elements. There are two solutions to this:

1. Call the function after page load. I.e.

   <body onload="customPanel(map, "map2", dirn, document.getElementById("path2"), 1);">
   

2. Put all your Javascript at the bottom