Here a print of the functionality before using the modal, worked perfectly, both the autocomplete of cities and the function of plotting the routes: link
However when using a modal autocomplete does not work and consequently does not trace the routes: link
Here is the code for modal
<div id="cadastrarOferecer" class="modal">
<div class="modal-content">
<div class="row">
<div class="card-todo-modal col s12 m3 l3">
<h5 align="center" class="txt-oferecer header">Oferecer Carona</h5>
<form name="form" method="post" onblur="return validacao();" action="carona/oferecer_carona.php">
<div class="input-field col s12">
<input id="txtEnderecoPartida" name="txtEnderecoPartida" placeholder="" type="text" class="autocomplete validate" onchange="CalculaDistancia()" onblur="CalculaDistancia()" required="required">
<label for="txtEnderecoPartida">De onde vai sair?</label>
</div>
<div class="input-field col s12">
<input id="txtEnderecoChegada" name="txtEnderecoChegada" placeholder="" type="text" class="autocomplete validate" onchange="CalculaDistancia()" onblur="CalculaDistancia()" required="required">
<label for="txtEnderecoChegada">Pra onde você vai?</label>
</div>
<div class="input-field col s12">
<input id="data" type="date" class="datepicker" name="data" required="required">
<label for="data">Data</label>
</div>
<input class="btn waves-effect waves-light btn-modal-oferece" type="submit" name="procurar" value="Cadastrar" onchange="Materialize.toast('Cadastrado com sucesso', 4000)">
<input class="btn waves-effect waves-light btn-modal-oferece" type="submit" name="fechar" value="Fechar">
</form>
</div>
<div style="padding: 0px" class="col s12 m9 l9">
<div class="google-maps">
<iframe class="z-depth-2" width="600" scrolling="no" height="auto" frameborder="0" id="mapaModal" marginheight="0" marginwidth="0" src="//maps.google.com/maps?output=embed"></iframe>
</div>
</div>
</div>
</div>
</div>
Here below the code before using modal, which as you can check in the first print functioned normally:
<section id="roteiro">
<div class="container">
<form class="col s12" name="form" method="post" action="cadastro.php" onblur="return validacao();">
<div class="row">
<div class="col s12 m6 l6">
<h4 class="header">Seu roteiro</h4>
<div class="input-field col s12">
<input id="txtEnderecoPartida" type="text" class="validate" name="txtEnderecoPartida" onchange="CalculaDistancia()" onblur="CalculaDistancia()" required="required">
<label for="txtEnderecoPartida">De onde vai sair?</label>
</div>
<div class="input-field col s12">
<input id="txtEnderecoChegada" type="text" class="validate" name="txtEnderecoChegada" onchange="CalculaDistancia()" onblur="CalculaDistancia()" required="required">
<label for="txtEnderecoChegada">Pra onde você vai?</label>
</div>
<div class="input-field col s12">
<input id="data" type="date" class="datepicker" name="data" required="required">
<label for="data">Data</label>
</div>
<div align="center">
<div class="col s6">
<div class="row">
<button class="btn waves-effect waves-light procura" type="submit" name="procurar">
Procurar Carona
</button>
</div>
</div>
<div class="col s6">
<button class="btn waves-effect waves-light oferece" type="submit" name="oferecer">
Oferecer Carona
</button>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="google-maps">
<iframe width="600" scrolling="no" height="auto" frameborder="0" id="mapa" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?output=embed"></iframe>
</div>
</div>
</div>
</form>
</div>
</section>