How to print dynamic Google map and directions?

I have edited this question to make it easier to understand and removed one typo.  Here's my situation.  I have a dynamic Google map drawn inside a modal. The map includes  directions. So far everything is working well. My problem is printing the generated map and directions.

I've included just the modal code shows the print icon (button) and the div's holding the map (map-wrapper-artessa) and directions (directions-wrapper-artessa). Each of these div's have class="printSection" attached.  

I've also attached the code I'm trying to use to print the generated map and directions portion of the modal. Printing the entire modal would also be OK.

Help would be so great. Here is my code:

HTML

<!-- Modal - Dynamic Google Map - Artessa Community
                    ********************************************************************************* -->
      <div class="container-fluid">
            <div id="googleMapLgModalArtessa" class="modal fade in">
                  <div class="modal-dialog modal-lg-size-artessa">
                        <div class="modal-content">

                            <div class="modal-header modal-lg-size-artessa clearfix">
                                  <p class="modal-title text-center bigTextCommunitySubhead">ARTESSA KIRKLAND
                            </div>

                            <div class="modal-body">
                                  <div class="row-fluid">
                                       <div class="col-sm-7">
                                            <div id="inputForm-artessa">
                                                  <form id="mapInputs-artessa" action="#" method="post">

                                                        <div class="form-group">
                                                              <label class="sr-only" for="startAddressArtessa">Starting Address</label>
                                                              <input type="text" class="form-control input-lg smallTextMed" id="startAddressArtessa" placeholder="From: Enter Your Location">
                                                        </div>

                                                        <div class="form-group">
                                                              <label class="sr-only" for="endAddressArtessa">Ending Address</label>
                                                              <input type="text" class="form-control input-lg smallTextMed" disabled="disabled" id="endAddressArtessa" value="To: Artessa Kirkland&nbsp;&mdash;&nbsp;14111 74th Court NE Kirkland, WA 98034">
                                                        </div>
                                                  </form>
                                            </div>
                                       </div>
                                      <div class="col-sm-2">

                                            <button id="directionsButtonArtessa" type="button" class="btn btn-info btn-sm buttonCopyCommunity btn-community pull-right">SHOW DIRECTIONS</button>
                                        </div>
                                        <div class="col-sm-3">
                                                <button id="printButton-artessa" class="btn btn-link"><span class="icon ion-printer printIcon pull-right"></span></button>
                                                <a href="#" class="btn btn-default btn-lg buttonCopyCommunity btn-community-inverse pull-right" data-dismiss="modal">Close</a>
                                        </div>
                                  </div>
                                  <div id="map-wrapper-artessa" class="printSection">
                                  </div>
                                  <div id="directions-wrapper-artessa" class="printSection">
                                  </div>
                            </div>

                            <div class="modal-footer">
                            </div>
                      </div>
                  </div>
            </div>
      </div>

Select allOpen in new window

Javascript

           
            <script>

            // Print Dynamic Google Map  map & Directions- Artessa
            // ....................................................................................................................................


            function printElement(elem, append, delimiter) {
                  //alert("printElement called");
                  var domClone = elem.cloneNode(true);
                  var $printSection = document.getElementsByClassName('printSection');
                  var printMap = printSection[0];
                  var printDirections = printSection[1];

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

                 return printSection
            }


            document.getElementById("printButton-artessa").onclick = function() {
                  printElement(printSection[1], string);
                  window.print();
            

            </script>

      </body>

</html>

Select allOpen in new window