Agregar un mapa

  • Base de conocimiento
  • Responsive Website Builder
  • Agregar un mapa
  • Ayuda de Duda > Responsive Website Builder > Editar un sitio

Descripción general

Muestre a sus visitantes el mapa de cualquier ubicación que desee. Use este widget para mostrar la ubicación física de su negocio o de un evento especial. También puede usarlo para mostrar a los clientes dónde encontrarán estacionamiento.

Guía

Para agregar el widget Mapa a su sitio web, siga estos pasos:

1. Agregue el widget de mapa a su Website Builder. Para aprender más sobre cómo agregar widgets a su sitio web, vea Adición de widgets. Una vez colocado el widget, aparecerá el Editor de contenido.

2. Ingrese la dirección de su negocio en el cuadro de texto en la parte superior del Editor de contenido.

addamap1_en-US.png

3. Seleccione la dirección en la lista desplegable que aparece.

addamap2_en-US.png

4. Puede elegir mostrar un botón de mapa en lugar de una imagen de mapa. Para mostrar un botón de mapa en dispositivos específicos, seleccione el dispositivo(s) donde desea que aparezca el botón. Si no se elige ningún dispositivo, se mostrará la imagen de mapa. 

addamap3_en-US.png

5. Ingrese el texto que desea que aparezca en el botón en el campo "Texto en el botón".

addamap4_en-US.png

Mostrar un elemento emergente con información de la ubicación

También puede mostrar un elemento emergente con información de la ubicación en el widget de mapa. Cambie el título, la descripción y las opciones de presentación en el Editor de contenido del widget de mapa.

addamap5_en-US.png

Diseño

Para abrir el Editor de diseño , haga clic en la ficha de diseño en la esquina superior izquierda para cambiar la disposición, estilo y espaciado del mapa. Edite el diseño del mapa que aparece en su sitio web usando la sección de disposición. Puede hacer cambios en la anchura y altura, además de cambiar los estilos de borde, en la sección de estilo. Personalice los rellenos y los márgenes (el espaciado alrededor del widget) en la sección de espaciado.

Incruste un mapa de Google usando un widget HTML

También puede incrustar mapas desde Google Maps. Estas son las instrucciones que debe seguir para agregar un mapa incrustado usando el widget HTML.

  1. Navegue a Google Maps.
  2. Busque la ubicación que desee.mapsembed1_en-US.png
  3. Haga clic en el menú situado arriba a la izquierda, luego haga clic en la opción "Compartir o incrustar mapa".mapsembed2.png
  4. Haga clic en la ficha "Incrustar mapa".
  5. Copie el URL entre las comillas que van luego de <iframe src =". Asegúrese de copiar el URL completo anidado entre las comillas.mapsembed3_en-US.png
  6. Navegue al sitio de Duda y agregue el widget HTML a una fila o columna.mapsembed4_en-US.png
  7. Use el siguiente código de incrustación y agregue el URL que obtuvo de Google Maps entre las comillas que van después de iframe src=:                                                                                                                             <div class="embed-container"><iframe src="     " frameborder="0" allowfullscreen></iframe></div>mapsembed5_en-US.png
  8. Vaya al Modo de desarrollador.
  9. Haga clic en HTML/CSS del sitio, luego en la opción site.css.
  10. Incruste el siguiente CSS en esta sección:                                                                             .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }mapsembed6_en-US.png

El tamaño del mapa cambiará según corresponda para adaptarse a las vistas en los distintos dispositivos. Si usa el código de incrustación normal de Google Maps, el tamaño del widget de mapa aparecerá estático en todos los dispositivos y se cortará en la vista de los dispositivos móviles. mapsembed7_en-US.png

Preguntas frecuentes

Mi dirección no aparece en la lista desplegable

Si su dirección no aparece en la lista desplegable, significa que no podemos encontrarla en el API de MapBox (a veces diferente de su búsqueda de mapas). Para solucionar este problema, intente establecer un enlace de un widget Botón directamente al URL del mapa en Google Maps como alternativa. Si su dirección no aparece en MapBox, puede enviar una solicitud directamente a MapBox para agregarla.

Recursos

 

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!