ويدجت الخريطة - موقع

وربطه على الموقع الخاص بك Google Tag Manager الخطوة الأولى: إنشاء حساب على

لموقعك؟ Google Tag Manager كيف تضيف

My Places - Google My قم بزيارة

ثم قم بالضغط على العلامة باليسار

Create new map قم بالضغط على

قم بالبحث عن موقعك على الخريطة واختيار موقعك من الاختيارات

+ قم بإضافة الموقع من خلال علامة

Rename this layer قم بالضغط على

Save ثم Layer قم بإعادة تسمية ال

Share قم بالضغط على

OK قم بتسمية الخريطة ثم

Close قم بتشغيل الأزرار ثم

Embed on my website قم بالضغط على الثلاث نقاط واختر

قم بحفظ الكود الذي ستحصل عليه

New Tag و اضغط على tagmanager.google.com قم بزيارة

Tag Configuration اضغط على

Custom HTML اضغط على

قم بنسخ ولصق الكود التالي

<style>
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    background-color: #FEFEFE;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    border-radius:20px;
}
/* The Close Button */
.close {
    color: #AAAAAA;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
     .findme-btn-wrap {
        direction: ltr;
        position: fixed;
        left: auto;
        top: auto;
        right: 0%;
        bottom: 0%;
        z-index: 99;
        font-family: "Cairo" !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 200px;
        height: 60px;
        margin-right: 20px;
        margin-bottom: 16px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 99px;
        background-color: #B18147;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
        box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
      }
      .findme-btn-wrap:hover {
        cursor: pointer;
      }
      .findme-icon-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        float: right;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 99px;
        background-color: #895C26;
      }
      .findme-btn-txt {
        margin-right: 20px;
        float: right;
        color: #fff;
        font-size: 20px;
      }
   </style>
<script type="text/javascript" id="" src="https://kit.fontawesome.com/f1bed78758.js"></script>
<!-- Trigger/Open The Modal -->
<div class="findme-btn-wrap" id="myBtn">
        <div class="findme-icon-wrap">
          <div>
            <i class="fas fa-map-marker-alt" style="font-size: 20px; color: #fff;" aria-hidden="true"></i>
          </div>
        </div>
        <div class="findme-btn-txt">
          <div>أين تجدنا؟</div>
        </div>
      </div>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <div><iframe src="https://www.google.com/maps/d/embed?mid=1iR4l9fDjMLAxERrI-Akd5P27CbGSCGlI" width="640" height="480"></iframe></div>
  </div>
</div>
<script>
    // Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
// $(document).keyup(function(e) {
//   if (e.keyCode == 27) {
//      modal.style.display = "none";
//   }
// });
document.onkeydown = function (e) {
  switch (e.keyCode) {
    case 27:
        modal.style.display = "none";
        break;
    default:
        return; // Do nothing for the rest
  }
};
</script>