[Google Maps] Imprimir

Stranyer · #1 (**permalink**) 15/05/2008, 05:41

Bueno, no se si se entendio en el titulo.

Pero estoy haciendo este proyecto, en el cual, se "dibuja" polilineas arriba de google maps.

Hasta ahora todo salio bien, el tema es que ahora quiero imprimir SOLO google maps, con las polilineas.

Lo primero que se me habia ocurrido es hacer pagina sin nada, solo con el google maps, y un paint() dentro.
El tema es que tiene que tener diseño, asique lo que necesitaria es que al oprimir un boton "imprimir" habra un popup con el google maps modificado, y lo imprima automaticamente con el paint().

Alguna idea?, les dejo lo que tengo hasta ahora:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Municipio Marcos Paz</title>
	<style type="text/css">
	v\:* {
	  behavior:url(#default#VML);
	}
	.style1 {color: #000000}
	
    </style>
	
	
	
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAuVHxGrDlznED8qKoMbWkkBQCUqGkHgUftWaUsFex1_EygNt-0hTyJs1xA-0WGwK-tDESbOculg8apw" type="text/javascript"></script>
	<script type="text/javascript"> 
	//<![CDATA[ 
	function createMarker(point,name,type,html) { 
		var marker = new GMarker(point); 
		marker.name = name;
		marker.type = type;
		marker.html = html;
		return marker; 
	}
	function renderLine(){ 
		map.removeOverlay(startmarker); 
		map.removeOverlay(endmarker); 
		map.removeOverlay(editline);
		if (mypolyline.length){
			editline = new GPolyline(mypolyline,"#0000FF", 2, 1)
			map.addOverlay(editline);
			startmarker=new GMarker(mypolyline[0]); 
			startmarker.type="start"; 
			map.addOverlay(startmarker); 
			endmarker=new GMarker(mypolyline[mypolyline.length-1]); 
			endmarker.type="end"; 
			map.addOverlay(endmarker); 
		}
	} 
	
	function onLoad(){
		if (GBrowserIsCompatible()) { 
			// Display the map, with some controls and set the initial location 
			map = new GMap(document.getElementById("div_map")); 
			map.addControl(new GLargeMapControl()); 
			map.addControl(new GMapTypeControl()); 
			map.setCenter(new GLatLng(-34.78322222222222,-58.83550974150703), 16);
			map.setMapType(G_SATELLITE_MAP)

			mypolyline = [];
			startmarker = false;
			endmarker = false;
			editline = false;
			
			
			
			GEvent.addListener(map, "click", function(overlay, point) { 
				if (point){ 	// background clicked
					mypolyline.push(point); 
					renderLine(); 
				} else if (overlay) {   // marker clicked
					if (overlay.type=="start"){
						mypolyline.shift();
					} else if (overlay.type == "end"){ 
						mypolyline.pop(); 
					} else {	// not a start or end marker
						overlay.openInfoWindowHtml("I am "+overlay.name+"<br/>"+overlay.html);
					}
					renderLine(); 
				} 
			}); 
		} else { 
			alert("El navegador que esta utilizando no es compatible con esta pagina, pruebe con Mozilla Firefox"); 
		} 
	}
	
	//]]>
	</script>

</head>

<center>



	<body onload="onLoad()">
	 <p><span class="style1"></span><img src="RC.png" width="600" height="100" /></p>
		  <div id="div_map" style="width: 800px; height: 800px"></div>
		<div id="message">
		 
		
		</div>
  </body>
</center>
	
	
</html>

Desde ya, muchas gracias.

Stranyer · #2 (**permalink**) 15/05/2008, 12:35

Bueno, mas de 15 personas entraron, y como no respondieron, supongo que no sabia como hacer esto.

Pero ahora se me ocurre otra forma de hacer esto:

1.- Poner de fondo un color negro, pero en CSS (creo que esto no lo imprime, verdad?)
2.- Agregar un boton .jpg para imprimir. (pero que tampoco salga en la impresion)
3.- Esta pagina tiene que quedar como .PHP, el tema es que cuando la guardo asi, e intento abrirla con el IE me lo intenta descargar, no me visualiza, alguna idea?.

Es posible? si, no?, imagino que vos sabes como, dale, tomate 5 min y ayudame.

Voy a usar el IE6/7 para correr este google.

Desde ya, muchisimas gracias por poner atencion y mucho mas que muchisimas gracias si me ayudas xD!

crujikoki · #3 (**permalink**) 16/05/2008, 04:23

Hola,

Yo he usado bastante la API de Google Maps, pero justamente los polylines no. Pero me imagino que será como todo. Aun así no entiendo que es lo que queires hacer. Que quieres decir con imprimir??? Que aparezca en un pop-up y que no se pueda modificar el contenido del mapa?

Stranyer · #4 (**permalink**) 16/05/2008, 05:05

Cita:

Iniciado por crujikoki

Hola,

Yo he usado bastante la API de Google Maps, pero justamente los polylines no. Pero me imagino que será como todo. Aun así no entiendo que es lo que queires hacer. Que quieres decir con imprimir??? Que aparezca en un pop-up y que no se pueda modificar el contenido del mapa?

Mira, queria hacerlo de dos maneras, con que una salga mejor.

1.- Seria que en el archivo x.html contenga al mapa con un diseño (Fondo negro, titulo, y algun que otro detalle, para que no quede tan pobre, nose muy bien, pero creo que en CSS se puede hacer, aunque yo no pude). Pero esto tiene que ser impreso por IE6/7, pero solo tendria que salir el Google Maps.

2.- Es hacer un diseño con imagenes en el x.html mas el Google Map, entonces si yo agrego polilineas desde ahi, quiero que al oprimir un button "popup" salte una ventanita de 600 x 600px, con una img del google maps (con las modificaciones previas que se hicieron en x.html)

Espero me hayas entendido, si se puede hacer una de las opciones, barbaro.

Acepto consejos.

Eleazan · #5 (**permalink**) 16/05/2008, 09:12

impreso = impresora?

es más bien html + css, no veo los `problemas`.

Puedes colocar todo en `capas`, y cuando le des a "imprimir" con javascript cambias la visibilidad de dichas capas a invisibles, excepto las que quieras imprimer, e imprimes.

Aunq no entiendo lo q quieres decir............ imprimir por impresora? o capturar una imagen? >.<

pd: lo q decias del php, necesitas tener un servidor para ello (vease, EasyPHP, Xampp, etc)

Stranyer · #6 (**permalink**) 16/05/2008, 13:26

Cita:

Iniciado por Eleazan

impreso = impresora?

es más bien html + css, no veo los `problemas`.

Puedes colocar todo en `capas`, y cuando le des a "imprimir" con javascript cambias la visibilidad de dichas capas a invisibles, excepto las que quieras imprimer, e imprimes.

Aunq no entiendo lo q quieres decir............ imprimir por impresora? o capturar una imagen? >.<

pd: lo q decias del php, necesitas tener un servidor para ello (vease, EasyPHP, Xampp, etc)

Exactamente, imprimir de impresora.

Pero la idea, es imprimir solo el mapa de google.

Me podrias explicar como hacer, eso de colocar capas?

crujikoki · #7 (**permalink**) 14/08/2008, 00:53

Hola,

Por lo que veo tu problema no eran las polilineas...

Investigando por ahí he encontrado estos links que no se si te sirven, pero héchales unojo a ver:

http://www.htmlpoint.com/javascript/.../16/index.html

http://www.htmlpoint.com/dynamic/utility/utility14.htm

Si no te han servido nadamás que para perder tiempo, postea otra vez y a ver que hacemos.

flra · #8 (**permalink**) 02/12/2008, 11:47

Cita:

Iniciado por crujikoki

Hola,

Yo he usado bastante la API de Google Maps, pero justamente los polylines no. Pero me imagino que será como todo. Aun así no entiendo que es lo que queires hacer. Que quieres decir con imprimir??? Que aparezca en un pop-up y que no se pueda modificar el contenido del mapa?

Holaaa, yo tengo un problemita
Tengo un mapa, muestro un reporte que mediante un link tiene k irse al mapa a poner mapas, esto lo hago por medio de una funcion, pero cuando da click a otro link, no borra la marca anterior. Si uso clearoverlays, me borra todo el recorrido k tengo en el mapa y solo quiero que me borre la marca k hay sobre el recorrido que se muestra con cada click. ESta es la funcion
function marcas(lati,longi){
var point = new GLatLng(lati,longi);
map.clearOverlays(point); ////Aqui no se como borrar la marca anterior y k muestre la nueva
map.addOverlay(new GMarker(point));
map.setCenter(new GLatLng(lati,longi),8);
}

GRACIAS!