Print Google map with route directions overlay

how are you printing it?
do you mean selecting print from the menu or programmatically?

I'm printing programmatically.  The site can be seen at www.serenaconstruction.com. The key pieces of code are:

CSS (using Less)

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
//  #mapWrapper {
 //       page-break-after: always;
//    }

    #directionsWrapper {
      font-family: Helvetica, HelveticaNeue, sans-serif;
      font-size:12px;
      font-weight:normal;
      line-height:1.5;
    }
    .printNone{
       visibility:hidden;
    }
}

js

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

document.getElementById("printButton").onclick = function() {
    printElement(document.getElementById("mapTitle"));
    printElement(document.getElementById("mapWrapper"));
    printElement(document.getElementById("directionsWrapper"), true, "<hr />");
    window.print();

I'm looking for the how to add the map's directions overlay to the print list. Something like
printElement(document.getElementById("google.Maps.Directions.????"));

    else if (append === true) {
        if (typeof(delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof(delimiter) === "object") {
            $printSection.appendChlid(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

The script above has a typo. Please use this instead;


    function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof(delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof(delimiter) === "object") {
            $printSection.appendChlid(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}
     

<script>
 document.getElementById("printButton").onclick = function() {
    printElement(document.getElementById("mapTitle"));
    printElement(document.getElementById("mapWrapper"));
    printElement(document.getElementById("directionsWrapper"), true, "<hr />");
    window.print();
}

This successfully prints the map and directions. But "mapWrapper" only captures the map before the directions overlay has been added.  I want to include the polyline route overlay also.

Thanks for your comments.

just do this instead

function gmapPrint() {
    var content = window.document.getElementById("gmap");
    var newWindow = window.open();
    newWindow.document.write(content.innerHTML);
    newWindow.print();
}

Thanks

I will give this a try.

I'm wondering tho, will this also print the turn-by-turn directions or just the map?

would need to try it but i believe so - i have dismantled my testing widget ...

dgrafx,

I tried

<script>
document.getElementById("printButton").onclick = function gmapPrint() {
    var content = window.document.getElementById("gmap");
    var newWindow = window.open();
    newWindow.document.write(content.innerHTML);
    newWindow.print();
}
</script>

This resulted in a blank page in a new FF tab.

Thanks for your time and comments

I can test on Firefox later but in the meantime use the code exactly as I gave you

This isn't the complete optimum solution but it helps toward one.