2010-02-03 10 views
6

Sto utilizzando l'API di Google Maps v2 e mi piacerebbe poter stampare la mappa nello stesso modo di Google nella sua pagina di Maps.Come visualizzare Google Maps in modalità "stampa"?

È possibile fare clic sull'icona piccola stampante e crea una nuova finestra popup con la stessa mappa ma tutte le cose non stampabili (come i controlli) vengono eliminate. So che usano @media print per ottenere quell'effetto quando si preme "Stampa anteprima" o "Stampa" nel navigatore. Tuttavia, la finestra popup non è in modalità di stampa.

C'è un modo per fare il trucco magico che stanno facendo, come impostare il tipo di supporto corrente su "stampa"? O o imbrogliano e impostano un trucco stile CSS personalizzato?

Ho un plug-in Silverlight e una mappa Google sulla stessa pagina e voglio essere in grado di creare una finestra popup contenente solo la mappa pronta per la stampa (come sta facendo Google).

Grazie a http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ So come ottenere il contenuto HTML ma posso solo ottenere il contenuto con tutti i controlli ecc. (Che non voglio).

Qualsiasi aiuto sarà apprezzato.

risposta

6

mappe di Google ha messo una classe gmnoprint su tutti gli elementi che non vogliono stampare .. quindi impostare questo a display:none nel file css stampa o finestra pop-up li nasconde ..

.gmnoprint{ 
    display:none; 
} 

Of'course questo nasconderà qualsiasi cosa Google ritenga non stampabile. Se vuoi selezionare altri elementi dovrai in qualche modo analizzare il loro codice html :(

+0

Sì, l'ho finalmente notato mentre giocavo con gli strumenti di sviluppo in IE. Ho aggiunto lo stile e funziona esattamente come previsto :) – R4cOON

+0

Grazie per l'aiuto, questo ha fatto parte di ciò di cui ho bisogno. Ha mostrato la mappa, ma le polilinee che ho su sono ancora nascoste, qualche idea su come farle mostrare? – MikeSchem

1

Un altro approccio utile per stampare google maps è usare lo Google Static Maps API. può generare un'immagine statica basata su un intervallo di parametri di visualizzazione (posizione, livello di zoom, dimensioni, marcatori ecc ...) e includi quell'immagine nella tua pagina di visualizzazione della stampa.

+1

Questa non è un'opzione per me. Ho un sacco di sovrapposizioni personalizzate sulla mappa e non ho proprio voglia di duplicare la logica di creazione per essere in grado di stampare mentre ho una perfetta immagine della mappa a portata di mano. – R4cOON

+0

Abbastanza corretto: P ... Una limitazione dell'API statica è che non si è in grado di fare tutti i marcatori personalizzati, ecc ... Quindi, se hai un sacco di sovrapposizioni, non è giusto per te. +1 sulla domanda però :) – RedBlueThing

3

Avevo lo stesso problema con una sovrapposizione di immagini mappa personalizzata aggiunta via kml. L'idea di Gaby sulla classe gmnoprint era la chiave. Nel mio caso, il div con la classe gmnoprint applicata era il genitore diretto del mio elemento img che stava scomparendo. Io fondamentalmente creato un "fare overlay collegamento stampabile":

$("#printable-map").click(function() { 
     if($(this).text() == "Include overlay when printing") { 
      $(this).text("Exclude overlay when printing"); 
      $("[src$=blah.png]").parent().removeClass("gmnoprint"); 
     } else { 
      $(this).text("Include overlay when printing"); 
      $("[src$=blah.png]").parent().addClass("gmnoprint"); 
     } 
    }); 

testato e funziona in Safari, FF, e Chrome.

Problemi correlati