загрузки Google Maps IFrame после JQuery добавить

Question

У меня есть этот красивый IFrame 3d вид на карте Google в файле iframe.php

<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2shk!4v1484532774391!6m8!1m7!1sOYCSnR8N9qoAAAQ7LsT_ew!2m2!1d22.27612005902588!2d114.1724398834276!3f285!4f0!5f0.7820865974627469" width="100%" frameborder="0" style="border:0" allowfullscreen></iframe> 

И я хочу, чтобы загрузить это после того, как AJAX в определенной DIV, когда клиент нажмите a

<a href="#">Load iframe</a> 
<div id="iframe"> 
</div> 

<script> 
$(document).on('click','a',function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: 'iframe.php' 
    }).done(function(iframe) { 
    $('#iframe').append(iframe); 
    }); 
}); 
</script> 

Но это загружает html (покажет мне простой текст), и iframe не запускается. Что мне не хватает? или iframe может работать только при загрузке?

Answer 1

Try .html (...) вместо .append (...)

Этот код работает для YouTube видео:

<div id="frame"></div> 
<button id="btn-clickable">Clicke Me!</button> 

<script> 
    $(document).ready(function() { 
     $(document).on('click', '#btn-clickable', function() { 
      $('#frame').html('<iframe width="560" height="315" src="https://www.youtube.com/embed/U2SRUPbtVWQ" frameborder="0" allowfullscreen></iframe>'); 
     }); 
    }); 
</script>