Google Maps API V3 de l'Impression des Cartes

Je suis à la recherche d'une méthode pour imprimer efficacement Google maps qui ont été mis en œuvre sur un site à l'aide de l'api google maps v3.

J'ai vu certaines personnes à l'aide de la fenêtre.imprimer js et ensuite

@media print
{
    body * { visibility: hidden; }
    #map * { visibility: visible; }
    #map {visibility: visible;position:absolute; top: 5px; left: 5px;}
}

Actuellement une carte plus grande est affiché aux utilisateurs à l'aide de fancybox et j'ai ajouté un bouton d'impression. Idéalement, je veux juste ajouter un peu de jquery ou similaire pour imprimer la carte.

Cependant, cela ne semble pas vraiment travailler. Quiconque a des suggestions sur la meilleure façon de le faire

Vérifier stackoverflow.com/a/11739627/1055987 ou stackoverflow.com/a/11485923/1055987 si ça peut aider.
Un grand merci, C'était agréable et facile. Pas sûr de savoir comment j'ai trouvé ces postes. Cheers 🙂

OriginalL'auteur Purple Hexagon | 2012-10-24

  1. 18

    Je suppose que par la simple mais subtile de manipulation du DOM, vous pouvez obtenir le "instantané" de votre Google Maps (et, en théorie, toutes les cartes :)) spectateur et parfaitement imprimer dans tous les navigateurs. En supposant que $mapContainer est le conteneur principal de votre carte, le code associé est:

    //printAnyMaps ::
function printAnyMaps() {
  const $body = $('body');
  const $mapContainer = $('.map-container');
  const $mapContainerParent = $mapContainer.parent();
  const $printContainer = $('<div style="position:relative;">');

  $printContainer
    .height($mapContainer.height())
    .append($mapContainer)
    .prependTo($body);

  const $content = $body
    .children()
    .not($printContainer)
    .not('script')
    .detach();

  /**
   * Needed for those who use Bootstrap 3.x, because some of
   * its `@media print` styles ain't play nicely when printing.
   */
  const $patchedStyle = $('<style media="print">')
    .text(`
      img { max-width: none !important; }
      a[href]:after { content: ""; }
    `)
    .appendTo('head');

  window.print();

  $body.prepend($content);
  $mapContainerParent.prepend($mapContainer);

  $printContainer.remove();
  $patchedStyle.remove();
}

    Noter que vous pouvez facilement remplacer $printContainer par un modèle d'impression. Ici, j'utilise juste un simple <div> qui sert d'espace réservé de l'instantané.

    Code de travail ici: http://jsfiddle.net/glenn/6mx21ted

    Cette fonction est l'impression correctement, Mais il y a un léger problème avec elle. C'est l'impression de 3 pages, même si la carte peut être adapté dans une seule page.
    J'ai essayé ceci, mais il montre une carte vierge, seuls les Marqueurs s'affiche
    L'esprit de partager votre code dans un endroit comme JSFiddle ou GitHub afin que je puisse mieux comprendre la cause et d'améliorer la solution?
    Oui, C'était la même que la vôtre, n'est pas un peu différente. Ce qui peut être affacting?
    Merci pour cette solution de contournement, dans mon site fonctionne seulement avec la css partie de votre : '@media print { img { max-width: aucun !important; } a[href]:after { content: ""; } } '

    OriginalL'auteur Glenn Mohammad

  2. 5

    Veuillez noter que si vous êtes également à l'aide de Bootstrap, il va casser l'impression des cartes pour vous. Ajoutez ce code:

    @media print {
  img {
    max-width: auto !important;
  }
}

    Voir Twitter Bootstrap CSS affectant Google Maps.

    OriginalL'auteur tempranova

  3. 2

    En HTML, #Gmap est la div vous afficher la carte google, et Imprimer Bouton d'appel de la fonction gmapPrint() une fois qu'il a été cliqué.

    <!-- HTML -->
<div id="Gmap"></div> 
<div onclick="gmapPrint();">Print Button</div>

    En JavaScript, le gmapPrint() permet de lire les détails de la carte et de les écrire sur une nouvelle fenêtre. Puis imprimez la nouvelle fenêtre. 

    <!-- JS Script -->
function gmapPrint() {
    var content = window.document.getElementById("Gmap"); //get you map details
    var newWindow = window.open(); //open a new window
    newWindow.document.write(content.innerHTML); //write the map into the new window
    newWindow.print(); //print the new window
}
    salut @Jingwen je veux imprimer la carte avec le contenu de la page? J'ai reçu de mise en page pour l'impression avec la position de la carte en elle lorsque j'utilise la fenêtre.Print (), il imprime tout le texte dans un div mais pas imprimer la Carte de google? une idée? suggessions?
    ici marqueur n'est pas l'impression

    OriginalL'auteur Jingwen

  4. 0

    Vous pouvez utiliser html2canvas.js pour convertir la carte div élément canvas, alors vous pouvez l'imprimer en tant qu'image. Code ci-dessous fonctionne parfaitement pour moi:

    HTML

    <div id="map" style="width:500px;height:500px;"></div>
<input type="button" value="Print Map" class="printBtn" />

    JavaScript

    var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: defLocation,
            mapTypeId: 'satellite',
            streetViewControl: false
        });      
$(document).on('click', '.printBtn', function () {
            map.setOptions({
                mapTypeControl: false,
                zoomControl: false,
                streetViewControl: false,
                panControl: false
            });
            var printWin = window.open('', '', 'width=1000,height=700');
            var windowContent = '<!DOCTYPE html>';

            html2canvas($("#map"), {
                useCORS: true,
                onrendered: function (canvas) {
                    windowContent += '<html>'
                    windowContent += '<head><title>Print canvas</title></head>';
                    windowContent += '<body>'
                    windowContent += '<img src="' + canvas.toDataURL() + '">';
                    windowContent += '</body>';
                    windowContent += '</html>';
                    printWin.document.open();
                    printWin.document.write(windowContent);
                    printWin.document.close();
                    printWin.focus();
                    setTimeout(function () { printWin.print(); printWin.close(); }, 500);

                    map.setOptions({
                        mapTypeControl: true,
                        zoomControl: true,
                        streetViewControl: true,
                        panControl: true
                    });
                }
            });
        });

    OriginalL'auteur Ceyhun