onsa
12/19/2016 - 5:11 PM

Sample popup map with Bootstrap 3

Sample popup map with Bootstrap 3

popupMapExample.html
content_copyfile_download
<!DOCTYPE html>
 <html lang="en-GB">
  <head>
    <title>Bootstrap 3 popup map example</title>	
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
  <header>
  </header>
    <div class="container">
      <div class="col-2">
        <a href="#mapModal" data-toggle="modal">Click me</a>
        <div class="modal fade in" id="mapModal">
          <div class="modal-content" style="margin-left: auto; margin-right: auto; width: 60%; margin-top: 100px">
            <div class="modal-header" style="height: 65px;">
              <h1 class="modal-title pull-left">Header</h1>
              <button class="close" style="margin-top: 10px" type="button" data-dismiss="modal">
                <span>&times;</span>
              </button>
            </div>
            <div class="modal-content">
              <div>
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3516.639799254184!2d-3.192134437978268!3d55.938584943800784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482167770319" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <footer>
	</footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
 </html>