Google maps in colorbox

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js"></script>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 90%;
		width:40%
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <script>
  $(document).ready(function(){
    $.colorbox({html:'<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.tw/maps?t=m&amp;ie=UTF8&amp;ll=25.07938,121.67058&amp;spn=0.041823,0.077162&amp;z=14&amp;brcurrent=3,0x345d53034b8c38af:0xc50f362cc271a639,1,0x345d5538b0b6645f:0x5aa90dfa6620edc0&amp;output=embed"></iframe>'});
})
</script>
</html>

JavaScript

$(document).ready(function(){
    $.colorbox({html:'<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.tw/maps?t=m&amp;ie=UTF8&amp;ll=25.07938,121.67058&amp;spn=0.041823,0.077162&amp;z=14&amp;brcurrent=3,0x345d53034b8c38af:0xc50f362cc271a639,1,0x345d5538b0b6645f:0x5aa90dfa6620edc0&amp;output=embed"></iframe>'});
})