Inserting and displaying a map

Limitations

Parent element size:

Minimum width	Minimum height
320 px	550 px

If the parent element is smaller than these dimensions, the map will intentionally not be displayed

Insert these scripts into the page header:

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

The scripts can also be placed in the body of the page, but it’s not the preferred option – inserting scripts into the body of the page or into specific HTML elements is suitable, for example, when using maps in a modal window or via an iframe.

Place the following element where you want the map to appear on the page:

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

This will display the pickup point map in the basic mode for e-shops, providing a button to select a pickup point.

Example of a finished solution from an e-shop

Modal window display

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

Download HTML here