WebSite X5Help Center

 
Lola M.
Lola M.
User

Google Maps y Street View 100% ancho de pagina  es

Autor: Lola M.
Visitado 1661, Followers 2, Compartido 0  

Hola,  me gustaria saber como puedo insertar Google Maps y Street View para que 100% ancho de pagina. Muchas gracias

Publicado en
7 RESPUESTAS - 3 úTIL - 1 CORRECTO
Jorge M.
Jorge M.
Moderator

Hola Lola.

Para eso debes de usar estilos de filas. Que es el único modo de tener el mapa adaptado al 100% del ancho, revisa la información en:

http://help.websitex5.com/es/v14/pro/index.html?aspetto_riga.htm&utm_source=software&utm_medium=Professional_14

Mira la captura:

Un consejo, en la rejilla lógicamente debe de ir un objeto así no lo uses para que puedas hacer esto. Yo uso un objeto HTML vacio (con la ventaja de poder poner la altura), mira mi ejemplo:

Revisa, prueba y comenta cualquier duda.
Saludos
Jorge M.

----------------------------------------------------------------------------------------------------------

¡Cada respuesta correcta/útil cuenta! como reconocimiento a un esfuerzo, así que:

  • Si una respuesta es correcta o te ayuda dale la opción de Correcto.
  • Si una respuesta te sirve, sea o no sea tu pregunta, dale útil.
  • Si no te sirve ninguna respuesta, para ayudar a comprender mejor la pregunta trata de agregar links o capturas de Vista Previa, Rejilla de Maquetación, Navegador
  • Para las capturas: usa la opción Añadir una imagen desde su PC.
Leer más
Publicado en de Jorge M.
Lola M.
Lola M.
User
Autor

Hola Jorge, muchas gracias por su ayuda,

He insertado el mapa utilizando el estilo de filas tal y como me indicas, el efecto es el que busco, pero el mapa no muestra la informacion sobre la ubicacion de lo que quiero mostrar, opciones de como llegar, cambiar a vista satelite, marcadores con sitios cercanos, etc,  y demas informacion que sí aparece cuando pongo el mapa insertándolo como contenido de la pagina.

Visitanto la web de WebSite X5 - Plantillas de Usuarios, he encontrado una plantilla de un usuario en la que inserta un mapa en la web tal y como lo quiero, pero aún descargándome su plantilla para tratar de averiguar como lo hace, no consigo encontrar la solucion. Aqui os dejo el link del live demo de la plantilla del autor J. Kozak:

http://templates.thesunweb.com/live_demo/free/09/contact.html

Muchas gracias de nuevo,

Saludos Cordiales

Lola Mesa

Leer más
Publicado en de Lola M.
Jorge M.
Jorge M.
Moderator

Hola Lola, el debe de modificar código, esperemos que pase KolAsim, ‪que el sabe de programación a ver que nos dice.

Saludos

Jorge M.

Leer más
Publicado en de Jorge M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Jorge M.
Hola Lola, el debe de modificar código, esperemos que pase KolAsim, ‪que el sabe de programación a ver que nos dice. Saludos Jorge M.

... ciao Jorge ... wink

..............................

@ Lola, ...Publique el ENLACE de la página con el mapa "normal" de google para toda la línea que ha creado, y luego le explicaré qué hacer.
>> mapa original  del Marketplace;
>> 100% clon ejemplo  del mapa anterior;
... el código utilizado está en la línea 30 /HEAD (Ctrl + U), es decir:
<style> #imPageRow_1 * { width: 100%; padding:0px } </style>
.

(IT) - Posta il LINK della pagina con google mappa "normale" per tutta la riga che hai realizzato tu, e poi ti spiego cosa fare.
>> originale mappa Marketplace;
>> esempio clone al 100% delle precedente mappa;
il codice usato è al rigo 30 /HEAD (Ctrl+U), cioè questo:
<style> #imPageRow_1 * { width: 100%; padding:0px } </style>

...!... Publique el LINK ...

ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Lola M.
Lola M.
User
Autor

Hola KolAsim,

Muchisimas gracias por tu ayuda. gracias a vuestras indicaciones y ejemplos lo he conseguido smile, es justo el efecto que estaba buscando para mi web. Revisando los ejemplos que has puesto he conseguido ver como aplicar el codigo.

Aqui os dejo una indicaciones de como usar el codigo que nos has facilitado por si le sirve a algun otro usuario (perdon si mi explicacion no es muy tecnica wink)

  1. Insertar el objeto Google Map o Street View en nuestra página con tamaño normal.
  2. Abrir vista previa nuestra página en WebsiteX5.
  3. Elegir Botón Superior Derecho “Visualizar Sitio web en otro explorador” (Google Chrome)
  4. Presionar “Control + U” para ver el código de la pagina
  5. Presionar “Control + F” para abrir la herramienta de buscar.
  6. Escribimos la palabra “google” para que encuentre la línea donde está el código de google maps
  7. Buscamos unas líneas más arriba la primera palabra que encontremos que se llame imPageRow_XX donde el valor XX será un número que nos indica el numero objeto de google maps en nuestra página, que luego usaremos para indicar donde aplicar el código.
  8. Cómo Insertar el Codigo:
  9. Dentro del proyecto, nos vamos a la opción 3 Mapa. Elegimos la página donde tenemos el google map, pulsamos propiedades y luego pestaña “Avanzado”
  10. Ahí tenemos que pegar el codigo que nos indicastes:

        <style> #imPageRow_XX * { width: 100%;  padding:0px  } </style>

Y cambiaremos el valor XX por el que numero que encontramos en el Paso 7

Después de esto nuestro plano se verá ocupando el 100% de la pantalla.

Muchisimas gracias Jorge M. y KolAsim una vez mas por la ayuda,

Saludos Cordiales 

Lola Mesa smile

Leer más
Publicado en de Lola M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...  ...  ... ciao ... wink

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Jorge M.
Jorge M.
Moderator

Hola KolAsim, excelente como siempre, ¡gracias totales! este post debe de ser parte de las guías y tambien gracias a Lola M. que se animó a hacer el trabajo (es lo que la mayoría de usuarios debe de hacer) y publicó los pasos, una comunidad así de efectiva es lo que necesitamos.

Saludos y gracias a ambos.

Jorge M.

Leer más
Publicado en de Jorge M.