title: how to insert google map in popup or lightbox?
body: <p>I want to ask!
  I'm designing an application, but there is a problem in inserting a google map in a popup or lightbox which display the map can not meet the "div id="wrap_peta"" like in the <a href="http://i1252.photobucket.com/albums/hh564/Adem_Natural/masalahgooglemap_zpsca4dda5d.jpg" rel="nofollow">picture</a>. 
  The problem is not caused by the failure loading map <br></p>
  
  <p>I asked for help from all of what's wrong in my script thanks fo everyone</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/lightbox.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/index.css"/&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/lightbox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function load_peta() 
      {
          var semarang = new google.maps.LatLng(-7.201470266411334, 110.08918792956547);
          var petaoption = {
          zoom: 9,
          center: semarang,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          peta = new google.maps.Map(document.getElementById("peta"),petaoption);
          google.maps.event.addListener(peta,'click',function(event){
          kasihtanda(event.latLng);
          });
  
          load_list_terminal('awal');
  
      }
      google.maps.event.addDomListener(window, 'load', load_peta);
  &lt;/script&gt;
  
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!--Bagian Bar Navigasi Atas termasuk search --&gt;
      &lt;div id="bar_atas"&gt;
          &lt;div style="margin:auto; margin-top:5px; padding:5px 5px 5px 5px; height:50px; width:90%;"&gt;
          &lt;h1&gt;GIS Hubkominfo&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
      &lt;p&gt;&lt;a onclick="show_lightbox()" href="javascript:void()"&gt;input terminal&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="background" onclick="hide_lightbox()" class="bgdasar"&gt;&lt;/div&gt;
      &lt;div id="popup" class="wraplightbox" style="margin:auto"&gt;
          &lt;p onclick="hide_lightbox()" style="cursor:pointer"&gt;tutup&lt;/p&gt;
          &lt;div id="peta" style="height:300px; margin-bottom:10px; border:solid #999 2px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>