Moteur de réservation Plus - Masquer ou remplacer le mapper de votre établissement

Une image statique peut être une photo indiquant comment atteindre votre établissement.

Étape 1 - Téléversez la nouvelle image en ligne

Pour afficher l’image à la place de la carte, elle doit être téléversée ou enregistrée sur internet sur un des sites d’hébergement d’images.

1. Rendez-vous sur http://imgbb.com/, puis cliquez sur Démarrer le téléversement pour sélectionner l’image depuis votre appareil
2. Choisissez l’option Ne pas supprimer automatiquement
3. Cliquez sur Téléverser

4. Sélectionnez l’option Liens des visiteurs dans la section Codes d’intégration
5. Copiez le lien de votre image (vous aurez besoin de ce lien plus tard, pour les étapes suivantes)

Étape 2 - Copier l’adresse de l’image

1. Ouvrez une fenêtre de navigation privée dans votre navigateur
2. Collez le lien de l’image (copié à l’étape précédente) dans cette fenêtre de navigation privée
3. Faites un clic droit et copiez l’adresse de l’image

Étape 3 - Ajoutez l’image à votre moteur de réservation

• Accédez à la page Personnaliser le moteur de réservation
• Ajoutez le code suivant dans le champ JavaScript de la section Personnalisation de votre moteur de réservation
• Dans le code ci-dessous, collez l’adresse de l’image précédemment copiée dans la source de l’image (img src) comme indiqué ci-dessous (en remplaçant le texte Ajouter ici l’adresse de l’image copiée)

<script>
  // Lorsque le moteur de réservation est prêt
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
    // Écouter l’événement property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {
      // masquer la carte actuelle
      map.style.display = 'none';
      // // Exemple d’inclusion d’une image statique
      map.insertAdjacentHTML('afterend', `<img src="Ajouter ici l’adresse de l’image copiée" alt="Carte de l’établissement" style="width:100%; height:auto; display:block;">`);
    }, false);
  });
</script> 

Le moteur de réservation affiche la carte qui récupère les informations sur l’emplacement de votre établissement depuis les paramètres du système. Pour remplacer cette carte par défaut par Google Maps, suivez les instructions ci-dessous.

Étape 1 - Copier le code de localisation depuis Google Maps

1. Ouvrez Google Maps
2. Trouvez l’emplacement de votre établissement
3. Cliquez sur Partager

4. Cliquez sur Intégrer une carte
5. Cliquez sur Copier le HTML (cela copiera le code complet). Le code doit commencer par <iframe et se terminer par /iframe>

Exemple : Le code surligné en rouge ci-dessous indique la langue de la carte, l’anglais (en). Si nécessaire, vous pouvez la changer pour d’autres langues (par exemple espagnol (es), portugais (pt), etc.).

<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>

Étape 2 - Insérer le code de personnalisation

• Copiez le code ci-dessous et insérez-le dans la page Personnaliser le moteur de réservation , dans le champ JavaScript :
• Remplacez le texte « Ajoutez ici le code copié depuis Google Maps » par le code que vous avez obtenu depuis Google Maps.
  • Important : Gardez-le entre guillemets "".Résultat attendu : "<iframe src=></iframe>" ;
• Assurez-vous que la largeur est réglée à 100%. La hauteur est généralement fixée à 45, mais vous pouvez l’augmenter pour afficher une carte plus longue.
• Enregistrez vos modifications :

<!-- **DÉBUT** Remplacer la carte leaflet par Google Maps **DÉBUT** -->
<script>
  // À la préparation du moteur de réservation
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    const { eventSystem } = detail;
       
    // Écouter l'événement property-map-loaded
    eventSystem.addEventListener('property-map-loaded', ({ map, mapContainer, address }) => {

      // masquer la carte actuelle
      map.style.display = 'none';

      // // Exemple d'inclusion de Google Maps
      map.insertAdjacentHTML('afterend', 'Ajoutez ici le code copié depuis Google Maps');

    }, false);
  });
</script>
<!-- **FIN** Remplacer la carte leaflet par Google Maps **FIN** -->