Cómo cambiar el mapa de mybookings por Google Maps

Seguir

El sistema de mybookings incluye un mapa y obtiene la información de ubicación de su propiedad.

Si desea cambiar el mapa agregado por defecto por Google Maps, siga las instrucciones en este artículo.

Recuerde que esta opción requiere la suscripción al plan Cloudbeds Plus o a uno equivalente.

Paso 1. Copie el código de ubicación de Google Maps

Siga las instrucciones en la sección de ayuda de Google Maps: https://support.google.com/maps/answer/144361?hl=es-419.

Nota: A veces, el tráfico y otra información de Google Maps no están disponibles en el mapa incorporado.

  1. Abra Google Maps.
  2. Busque la ubicación de su propiedad.
  3. Haga clic en Compartir.
Google Maps - Google Chrome
Jimbaran Beach - Google Maps - Google Chrome
  1. Haga clic en Insertar un mapa.
  2. Haga clic en Copiar HTML (esta acción copia todo el código).

Recuerde que el código debe empezar con <iframe y terminar con /iframe>.

El código se genera en el idioma establecido de su navegador y el mapa se muestra en ese idioma.

Veamos un ejemplo: el código resaltado en rojo en la siguiente captura de pantalla es el idioma del mapa (inglés o en). De ser necesario, puede cambiar el idioma del mapa, como a español (es) o a portugués (pt).

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7886.465207518082!2d115.1726561!3d-8.764173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd244f35b8a5d05%3A0xd42d4da6a44aa938!2sJimbaran%20Beach!5e0!3m2!1sen!2sid!4v1596624024065!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Jimbaran Beach - Google Maps - Google Chrome
Paso 2. Inserte el código de personalización en mybookings
  1. Para reemplazar el mapa de mybookings por el de Google Maps, primero debe esconder el mapa agregado por defecto.

Inserte el código que se agrega a continuación en la casilla Metaetiquetas personalizadas de la sección Personalizar mybookings.

<style>
#map_canvas { display: 
none; 
}
</style>
DEMO - El Bolsón - Personalizar mybookings - Google Chrome
  1. Ahora se puede agregar el código de Google Maps (como se ve en el Paso 1). Ello integra el mapa de Google Maps a mybookings.

    Reemplace el código resaltado en rojo con el copiado de Google Maps.

    Asegúrese que el  ancho del mapa sea de 100%. La altura suele estar determinada a 450, pero puede incrementarla para mostrar un mapa más largo.
<script type="text/javascript">
window.addEventListener("load", function(event) {
  //append google maps iframe
  var d1 = document.getElementById('map_canvas');
  d1.insertAdjacentHTML('afterend', '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2572.60377989993!2d24.020110315452538!3d49.849901979396975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473add0bab6b2a0d%3A0x808e8719253e6808!2sForum+Lviv!5e0!3m2!1sru!2sua!4v1547106673131" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>');
}, false);
</script>
  1. Copie todo el código y agréguelo a la casilla Pie de página personalizado de su página de reservas en la sección Personalizar mybookings.

¡Puede copiar y pegar el mismo código en los demás idiomas de su sitio web!

DEMO - El Bolsón - Personalizar mybookings - Google Chrome
  1. El resultado final debe verse así:
Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk