title: How to add google map in an iframe tag
body: <p>I want to show a map direction to the user and I want to show this map in a popup iframe tag.  How we can show this map in iframe tag</p>
  
  <p><a href="https://www.google.com/maps/dir/31.5282618,74.3234164/University+of+South+Asia,+47+Tufail+Rd,+Lahore/@31.5308165,74.3164608,13z/data=!3m1!4b1!4m10!4m9!1m1!4e1!1m5!1m1!1s0x3919050d90b4fac3:0xa46dbb2def95e45a!2m2!1d74.3781741!2d31.5328815!3e" rel="nofollow noreferrer">Here is the link</a> which I want to show in iframe tag in my code</p>
  
  <p>I do not know why this is not working.  Thanks in advance for your great thoughts 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Get the modal
  var modal = document.getElementById('id01');
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  /* Full-width input fields */
  input[type=text], input[type=password] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
  }
  
  /* Set a style for all buttons */
  button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
  }
  
  /* Extra styles for the cancel button */
  .cancelbtn {
      width: auto;
      padding: 10px 18px;
      background-color: #f44336;
  }
  
  /* Center the image and position the close button */
  .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
      position: relative;
  }
  
  img.avatar {
      width: 40%;
      border-radius: 50%;
  }
  
  .container {
      padding: 16px;
  }
  
  span.psw {
      float: right;
      padding-top: 16px;
  }
  
  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      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 */
      padding-top: 10px;
  }
  
  /* Modal Content/Box */
  .modal-content {
      background-color: #fefefe;
      margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */
  height:auto;
  }
  
  /* The Close Button (x) */
  .close {
      position: absolute;
      right: 25px;
      top: 0;
      color: #000;
      font-size: 35px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: red;
      cursor: pointer;
  }
  
  /* Add Zoom Animation */
  .animate {
      -webkit-animation: animatezoom 0.6s;
      animation: animatezoom 0.6s
  }
  
  @-webkit-keyframes animatezoom {
      from {-webkit-transform: scale(0)} 
      to {-webkit-transform: scale(1)}
  }
      
  @keyframes animatezoom {
      from {transform: scale(0)} 
      to {transform: scale(1)}
  }
  
  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
      span.psw {
         display: block;
         float: none;
      }
      .cancelbtn {
         width: 100%;
      }
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="document.getElementById('id01').style.display='block'" style="width:auto;"&gt;View Map Direction&lt;/button&gt;
  
  &lt;div id="id01" class="modal"&gt;
    
    &lt;form class="modal-content animate" action="action_page.php"&gt;
      &lt;div class="imgcontainer"&gt;
        &lt;span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal"&gt;&amp;times;&lt;/span&gt;
        
      &lt;/div&gt;
  
      &lt;iframe src="https://www.google.com/maps/dir/31.5282618,74.3234164/University+of+South+Asia,+47+Tufail+Rd,+Lahore/@31.5308165,74.3164608,13z/data=!3m1!4b1!4m10!4m9!1m1!4e1!1m5!1m1!1s0x3919050d90b4fac3:0xa46dbb2def95e45a!2m2!1d74.3781741!2d31.5328815!3e"&gt;&lt;/iframe&gt;
  
      &lt;div class="container" style="background-color:#f1f1f1"&gt;
        &lt;button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn"&gt;Cancel&lt;/button&gt;
     
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>