CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
calav3ra
calav3ra

Reputation: 196

Google Map JS API v3 not able to print route

In our webpage we have integrated the google maps js api v3 to display a dynamic view of some places. This works fine, including listing of driving directions.

However, printing gives us only the map WITHOUT the blue route on the map.

I now found out that those elements are rendered using the canvas elements, and several SO threads tell that a conversion from canvas to img(html) would be needed (same goes for other dynamic stuff like polylines, etc.).

BUT: c.toDataURL() gives us a security error (in chrome): "caught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." (Also, no other browsers print at all because script execution is stopped, probably because of that error.

Our code is like the following, it takes the concerned html, copies it, and does the conversion like shown on various pages, then later it goes on to printing, which works just fine if comment out the conversion...

    var originalContents = document.body.innerHTML;

    var dataUrl = [];
    var i = 0;

    /* Conversion Code */
    $("#map_canvas canvas").filter(function(){
      dataUrl.push(this.toDataURL("image/png")); // <-- THIS GIVES THE ERROR    
    });
    /* Conversion Code */

    var DocumentContainer = document.getElementById('map_canvas');
    var DocumentContainer_temp = $(DocumentContainer).clone();

    DocumentContainer_temp.find(".gm-style-iw").parent().remove();
    DocumentContainer_temp.find(".gmnoprint").remove();

    /* Conversion Code */
    $(DocumentContainer_temp).find('canvas').each(function () {               
     $(this).replaceWith('<img src="' +  dataUrl[i] 
                          + '" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px;" />');
     i++;
    });
    /* Conversion Code */

    //.... printing etc. following later

Thanks in advance for any help!

EDIT: I don't know why Google doesn't give a tutorial for printing such stuff (i guess they don't officially want to support this), but also our client requested this feature, stating it would be common on websites, whereas i NEVER HAVE seen a single website doing exactly what we try to do here:

  1. display a div with dynamic google maps content
  2. allow getting driving directions
  3. print both elements, map and directions.

I'd be glad to get from you a link to any website doing exactly that, because then i could easily look at their JS files and see how they do it....

Again, Thanks in advance!

Upvotes: 1

Views: 2116

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Basically your question is: why is it so difficult to print the map

I would ask back: Why do people make it so difficult.

It's not difficult to print a map(including the shapes created via canvas), you simply have to press the print-button.

The difficult thing is to copy/clone the map, but I don't see a reason why you have to do this

Instead of going the javascript-way you better use CSS. Use a layout of a page where it's via CSS possible to hide anything except the map, and all you would need is a media-print-stylesheet.

Of course this is most of the time also complicated, a really simple solution:

Use an iframe for the map(may be created on the fly). To print only the map call the print-method of the iframe, and all that will be printed is the map.

Upvotes: 4

Related Questions