Je voudrais imprimer la carte google (pas le reste de la page) de mon site Web, elle doit inclure des marqueurs, polyline, infoWindows.Comment imprimer un carte GoogleMap (ou n'importe quelle div)
La manière la plus courante est d'utiliser window.print() mais cela imprime toute la page, est-il possible d'imprimer uniquement une carte spécifique ou div?
J'ai vu des gens cacher la page entière à l'exception de la div rendue, mais cela semble trop.
J'ai trouvé une façon de le faire en utilisant une combinaison de html2canvas et popout:
D'abord, je l'utilise html2canvas pour rendre le GoogleMap (ou div à rendre).
Ensuite, j'ouvre une nouvelle fenêtre avec la taille de la carte ou la div, j'ajoute un tag img à l'intérieur de la fenêtre et je donne le canvas URI (rendu dans la première étape) comme données d'image.
Enfin, j'imprime le popup avec window.print() et puis ferme le popout.
Voici ma fonction js (y compris html2canvas lib):
function printDiv(divId){
// For GoogleMaps I ignore the helps messages (.gm-style-pbc) displayed over the GoogleMap
$(".gm-style-pbc").each(function(){this.setAttribute("data-html2canvas-ignore","true");});
html2canvas($('#'+divId),
{
useCORS: true, // useCORS for GoogleMap or divs that use resources from outside the website
onrendered: function (canvas) {
// Can be tweaked to avoid popout being blocked
var myWindow=window.open("about:blank","popup"," width="+canvas.width+", height="+ canvas.height + "resizable=0,scrollbar=0");
if (myWindow == null){
//If popout has been blocked display a error message here
}else{
//Creating empty window with rendred div image URI
var content = "<!DOCTYPE html>";
content += "<html><head><title>Map</title></head><body>"
content += "<img src="+canvas.toDataURL()+"></img>"
content += "</body></html>"
myWindow.document.open()
myWindow.document.write(content);
myWindow.document.close();
myWindow.focus();
//Added a 500 ms timer before printing and closing as GoogleChrome sometimes didnt had time to render the image and printed a blank screen
setTimeout(function(){myWindow.print();myWindow.close();},500);
}
}
});
}
Quelques notes:
Une capture d'écran de mon application française pour le plaisir de le faire:
