Inserting and displaying a map

Limitations

Parent Element Size:
The widget contains a built-in script that detects the height of the parent element. If the parent element has no defined height and depends on content, or if it has a height less than 400 pixels, the widget will automatically expand to 80% of the screen height.

However, if the parent element has a fixed height greater than 400 pixels, the widget will adapt to this height.

Insert the following scripts into the page header:

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

Scripts can also be placed in the body of the page, but this is not the preferred method — embedding scripts in the body or specific HTML elements is suitable for cases like modal windows or iframes.

This script also includes the CSS file for the widget.

Example image (in code, line 8 shows where the script is added):

Insert the following element at the location where you want the map to appear:

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

This will display the parcel shop map in the default mode for e-shops, providing a button for selecting a pickup location.

WARNING: This must be a standalone <div> block. It must not be embedded:

inside a <button>

inside a <a> link

inside a heading <h1>, <h2>, etc.

or inside any other text element

Example image (showing the div with ID inserted into a modal window where it will appear):

Example of a finished implementation from an e-shop

Display Modal Window

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

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

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

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

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

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

      modalButton.addEventListener("click", function () {
        modalOverlay.style.display = "block";
        modalBox.style.display = "block";

        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = "https://www.ppl.cz/sources/map/main.css";

        var script = document.createElement("script");
        script.src = "https://www.ppl.cz/sources/map/main.js";

        document.head.appendChild(link);
        document.head.appendChild(script);
      });

      closeButton.addEventListener("click", function () {
        modalOverlay.style.display = "none";
        modalBox.style.display = "none";
      });
    </script>
  </body>
</html>

[ Download HTML example here](https://www.ppl.cz/documents/20122/1732536/maps_params_example.html/f21ea735-20a4