Maps APi does not open within a bootstrap modal

    </div>
    <br>

    <div class="col-md-8">
        <dl class="dl-horizontal">
            <dt>Data Nascimento</dt>
            <dd data-bind="text: parseDate(DataNascimento)"></dd>
            <dt><a data-toggle="modal" data-target="#myModal">Cidade de Nascimento:</a></dt>
            <dd data-bind="text: CidadeNascimento.Nome + ' (' + CidadeNascimento.Pais.Nome + ')'"></dd>
            <dd>Clique <a data-toggle="modal" data-target="#myModal">aqui </a>para ver loalização</dd>
            <!-- ko if:DataMorte != null -->
            <dt>Data Morte</dt>
            <dd data-bind="text: parseDate(DataMorte)"></dd>
            <!-- /ko -->
            <!-- ko if:CidadeMorte != null -->
            <dt>Cidade de Morte:</dt>
            <dd data-bind="text: CidadeMorte.Nome + ' (' + CidadeMorte.Pais.Nome + ')'"></dd>
            <!-- /ko -->
        </dl>
        <hr />
        <h4>Prémios</h4>
        <div data-bind="foreach : PremioNobel">
            <dl class="dl-horizontal">
                <dt>Ano</dt>
                <dd data-bind="text : Ano"></dd>
                <dt>Categoria</dt>
                <dd data-bind="text : Categoria.Nome"></dd>
                <dt>Titulo</dt>
                <dd data-bind="text : Titulo"></dd>
                <dt>Motivacao</dt>
                <dd data-bind="html : Motivacao"></dd>
            </dl>
            <!-- ko ifnot : $index() == $parent.PremioNobel.length-1 -->
            <hr />
            <!-- /ko -->
        </div>
        <!-- ko if : Filiacao.length != 0 -->
        <hr />
        <h4>Filiação</h4>
        <!-- ko foreach : Filiacao -->
        <dl class="dl-horizontal">
            <dt>Instituição</dt>
            <dd><span data-bind="text:Nome"></span> - <span data-bind="text: Cidade.Nome"></span> (<span data-bind="text:Cidade.Pais.Nome"></span>)</dd>
        </dl>
        <!-- /ko -->
        <!-- /ko -->
    </div>
</div>
</div>





<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <iframe style="width: 100px; height: 100px; border:none" src="" data-bind="attr:{src: 'https://www.google.com/maps/embed/v1/place?key=AIzaSyBeeIycYH7Dx0aE7z9Qv4MlJyrzaJbJuhM&q=' + CidadeNascimento.Nome + ',' + CidadeNascimento.Pais.Nome}"></iframe>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

insert the code here

The maps opens if it is outside the modal, but when it is inside it does not open. I have already reduced the size to think that it could be this but not the same.