title: How to load a Google Map in an iframe with Javascript?
body: <p>I'm having a trouble with loading a Google Map in an iframe. I want to do <a href="http://jsfiddle.net/hCymP/6/" rel="nofollow">something like this</a>, but inside an iframe. I have tried in different ways:</p>
  
  <p>Trying to call the showNewMap() function before loading the script. But I get the following error: Uncaught TypeError: Object [object global] has no method 'showNewMap': <a href="http://jsfiddle.net/9RE4h/1/" rel="nofollow">http://jsfiddle.net/9RE4h/1/</a></p>
  
  <pre><code>var iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  var doc = iframe.contentWindow || iframe.contentDocument;
  if (doc.document) { doc = doc.document;}
  
  function showNewMap() {
  
      var mapContainer =  doc.createElement('div');
      mapContainer.setAttribute('style',"width: 500px; height: 300px");
      doc.body.appendChild(mapContainer);
  
      var mapOptions = {
          center: new google.maps.LatLng(-35.000009, -58.197645),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
  
      var map = new google.maps.Map(mapContainer,mapOptions);
  }
  
  var script = doc.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;' + 'callback=showNewMap';
  doc.getElementsByTagName('head')[0].appendChild(script);
  </code></pre>
  
  <p>Any idea to solve the problem?</p>