Vložení a zobrazení mapy - Widget PPL výdejní místa

Omezení

Velikost rodičovského prvku:
Ve widgetu je zabudovaný script, který zjištuje výšku nadřazeného (rodičovského) elementu. Pokud rodičovský element nemá definovanou výšku a závisí na obsahu a nebo má menší výšku jak 400 pixelů, widget se automaticky roztáhne na 80% výšky obrazovky.
Pokud však rodičovský element má pevně nastavenou výšku a ta je větší než 400 pixelů, widget se přizpůsobí této výšce.

Do hlavičky stránky vložte tyto scripty:


<script type="text/javascript" src="https://www.ppl.cz/sources/map/main.js" async></script>

Scripty lze vložit i do těla stránky, není to ale preferovaná varianta - vkládání scriptů do těla stránky, či konkrétních HTML elementů je vhodné v případě použití map např. v modálním okně, nebo pomocí iframe.

S tímto scriptem se přidá i soubor s css styly pro widget.
Příkladový obrázek (v kódu, na řádku 8, přidáváme daný script)

Do místa na stránce, kde chcete mapu zobrazit, vložte následující element:

<div id="ppl-parcelshop-map"></div>

Tímto se zobrazí mapa výdejních míst v základním módu pro eshopy, poskytující tlačítko pro vybrání výdejního místa.

POZOR: Toto musí být samostatný blok (div), nesmí být vložený:

do tlačítka <button>

do odkazu <a>

do nadpisu <h1>, <h2>, atd.

ani do jiného textového prvku

Příkladový obrázek (zde vkládáme div s ID do modálu, v kterém se poté zobrazí)

Příklad hotového řešení z eshopu

Zobrazení modální okno

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Button that creates a modal</title>
    <style>
      html,
      body {
        height: 100%;
      }

      /* CSS for the modal overlay */
      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
      }

      /* CSS for the modal box */
      .modal-box {
        position: relative;
        margin: 0 auto;
        height: 720px;
        display: none;
      }

      #close-modal-button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
      }

      .ppl-parcelshop-map {
        height: 100%;
        max-height: 640px;
      }
    </style>
  </head>
  <body>
    <button id="modal-button">Open Modal</button>

    <!-- Modal overlay -->
    <div class="modal-overlay"></div>

    <!-- Modal box -->
    <div class="modal-box">
      <button id="close-modal-button">Close Modal</button>
      <div id="ppl-parcelshop-map"></div>
    </div>

    <script>
      // Get the modal elements
      var modalOverlay = document.querySelector(".modal-overlay");
      var modalBox = document.querySelector(".modal-box");
      var closeButton = document.querySelector("#close-modal-button");

      // Get the button that opens the modal
      var modalButton = document.querySelector("#modal-button");

      // When the user clicks the button, show the modal
      modalButton.addEventListener("click", function () {
        modalOverlay.style.display = "block";
        modalBox.style.display = "block";

        // Create a link element to load the main.css file
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = "https://www.ppl.cz/sources/map/main.css";

        // Create a script element to load the main.js file
        var script = document.createElement("script");
        script.src = "https://www.ppl.cz/sources/map/main.js";

        // Add the script+href link to the document head
        document.head.appendChild(link);
        document.head.appendChild(script);
      });

      // When the user clicks the close button, hide the modal
      closeButton.addEventListener("click", function () {
        modalOverlay.style.display = "none";
        modalBox.style.display = "none";
      });
    </script>
  </body>
</html>

html ke stažení zde