Print Google map with route directions overlay

I'm printing a Google map with directions out of a Bootstrap modal window.

The base map prints, but I want the map after the directions overlay (the blue line tracing the route) is shown.

Does anyone low how to target the map after the polyline is drawn.  The map is drawn inside #mapWrapper.
dlearman1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dgrafxCommented:
how are you printing it?
do you mean selecting print from the menu or programmatically?
0
dlearman1Author Commented:
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);
}
0
dlearman1Author Commented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

dgrafxCommented:
just do this instead

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

I will give this a try.

I'm wondering tho, will this also print the turn-by-turn directions or just the map?
0
dgrafxCommented:
would need to try it but i believe so - i have dismantled my testing widget ...
0
dlearman1Author Commented:
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
0
dgrafxCommented:
I can test on Firefox later but in the meantime use the code exactly as I gave you
0
dgrafxCommented:
ok yes - doesn't work on ff ...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dlearman1Author Commented:
This isn't the complete optimum solution but it helps toward one.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Google Apps

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.