2010-02-03 12 views
6

Estoy usando Google Maps API v2 y me gustaría poder imprimir el mapa de la misma manera que Google en su página Mapas.¿Cómo ver Google Maps en el modo "imprimir"?

Puede hacer clic en el icono de la pequeña impresora y se crea una nueva ventana emergente con el mismo mapa, pero se eliminan todas las cosas no imprimibles (como los controles). Sé que usan @media print para lograr ese efecto cuando presionas "Vista previa de impresión" o "Imprimir" en el navegador. Sin embargo, la ventana emergente no está en modo de impresión.

¿Hay alguna forma de hacer el truco de magia que están haciendo, como configurar el tipo de medio actual para "imprimir"? ¿O hacen trampa y configuran un truco de estilo CSS personalizado?

Tengo un complemento de Silverlight y un Google Map en la misma página y deseo poder crear una ventana emergente que contenga solo el mapa listo para imprimir (como hace Google).

Gracias a http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ sé cómo obtener el contenido HTML, pero solo puedo obtener el contenido con todos los controles, etc. (que no quiero).

Cualquier ayuda será apreciada.

Respuesta

6

los mapas de Google puso una clase gmnoprint en todos los elementos que no desea imprimir .. por lo que este valor está a display:none en su archivo css de impresión o ventana emergente, se oculta ellos ..

.gmnoprint{ 
    display:none; 
} 

Of'course esto ocultará lo que google considere como no imprimible. Si desea seleccionar otros elementos, deberá analizar de alguna manera su código html :(

+0

Sí, finalmente me di cuenta de eso mientras jugaba con las herramientas de desarrollo en IE. Agregué el estilo y funciona tal como esperaba :) – R4cOON

+0

Gracias por la ayuda, esto hizo parte de lo que necesito. Mostraba el mapa, pero las polilíneas que tengo todavía están ocultas, ¿alguna idea sobre cómo mostrarlas? – MikeSchem

1

Otro método útil para imprimir mapas de Google es utilizar el Google Static Maps API. puede generar una imagen estática basada en un rango de parámetros de visualización (ubicación, nivel de zoom, tamaño, marcadores, etc.) e incluir esa imagen en su página de vista de impresión.

+1

Esa no es una opción para mí. Tengo montones de superposiciones personalizadas en el mapa y no me gusta duplicar la lógica de creación para poder imprimir mientras tengo a mano una imagen del mapa perfectamente buena. – R4cOON

+0

Lo suficiente: P ... Una limitación de la API estática es que no puede hacer todos los marcadores personalizados, etc. Así que, si tiene muchas superposiciones, no es adecuado para usted. +1 en la pregunta sin embargo :) – RedBlueThing

3

Estaba teniendo el mismo problema con una superposición de imagen de mapa personalizada agregada a través de kml. La mano de Gaby acerca de la clase de gmnoprint era la clave. En mi caso, el div con la clase gmnoprint aplicada era el padre directo de mi elemento img que estaba desapareciendo. Yo, básicamente, creó un "enlace que imprimible superposición":

$("#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"); 
     } 
    }); 

probado y funciona en Safari, FF y Chrome.