Good night, I have a project of a system that I'm developing, where I have a Google Maps API that brings the list of addresses queried by an autocomplete to the system user. This should happen in a modal, but this modal has some dynamic fields that appear after a query by name, CPF, RG or Phone of the client, so far it is working, when the system does not find the client name after a form of registration in the own screen to make the registration of this client, along with this register the address query field also appears, even the Google Maps map appears, but when consulting an address nothing appears in what should appear an autocomplete with the suggestions for the address entered. How to make it work?
Homepage:
<html>
<head>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
//Location details
for (var i = 0; i < place.address_components.length; i++) {
if(place.address_components[i].types[0] == 'postal_code'){
document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
}
if(place.address_components[i].types[0] == 'country'){
document.getElementById('country').innerHTML = place.address_components[i].long_name;
}
}
document.getElementById('location').innerHTML = place.formatted_address;
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('lon').innerHTML = place.geometry.location.lng();
});
}
</script>
</head>
<body>
<style>
#map {
width: 100%;
height: 400px;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#searchInput {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 50%;
}
#searchInput:focus {
border-color: #4d90fe;
}
</style>
<div class="main-content">
<div class="wrap-content container" id="container">
<section id="page-title" class="padding-top-15 padding-bottom-15">
<div class="row">
<?php
if($_SESSION['setor']=="Entrega" or $_SESSION['setor']=="Administrativo" and $_SESSION['cargo']=="Motoboy")
{
require_once'modules/delivery/index.phtml';
}
?>
<?php
if($_SESSION['setor']=="Caixa" or $_SESSION['setor']=="Administrativo" and $_SESSION['cargo']=="Operador de Caixa")
{
require_once'modules/cashier/index.phtml';
}
?>
<!-- <a href="javascript:window.print();">Imprimir</a>-->
</div>
</section>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
//Aqui a ativa a imagem de load
function loading_show(){
$('#loading').html("<img src='imgs/icons/loading.gif'/>").fadeIn('fast');
}
//Aqui desativa a imagem de loading
function loading_hide(){
$('#loading').fadeOut('fast');
}
// aqui a fun��o ajax que busca os dados em outra pagina do tipo html, n�o � json
function load_dados(valores, page, div)
{
$.ajax
({
type: 'POST',
dataType: 'html',
url: page,
beforeSend: function(){//Chama o loading antes do carregamento
loading_show();
},
data: valores,
success: function(msg)
{
loading_hide();
var data = msg;
$(div).html(data).fadeIn();
}
});
}
//Aqui eu chamo o metodo de load pela primeira vez sem parametros para pode exibir todos
// load_dados(null, 'pesquisa.php', '#MostraPesq');
//Aqui uso o evento key up para come�ar a pesquisar, se valor for maior q 0 ele faz a pesquisa
$('#search').keyup(function(){
var valores = $('#form_search').serialize()//o serialize retorna uma string pronta para ser enviada
//pegando o valor do campo #pesquisaCliente
var $parametro = $(this).val();
if($parametro.length >= 1)
{
load_dados(valores, 'public/modules/cashier/search.php', '#ShowPesquisa');
}else
{
//load_dados(null, 'pesquisa.php', '#MostraPesq');
}
});
});
</script>Search.php page In the search.php page I have an ajax code that tras for me the fields that I said, to register a new client already with google Maps API
<?php
session_start();
header('Content-type: text/html; charset=utf-8');
require_once('../../../controller/Connection.class.php');
//recebemos nosso par�metro vindo do form
$parametro = $_POST['search'];
$msg = "";
$id_user_logado = $_SESSION['ID'];
$PDO = db_connect();
//come�amos a concatenar nossa tabela
$select_client = "SELECT * FROM clientes WHERE nome LIKE '%".$parametro."%' OR cpf LIKE '%".$parametro."%' OR telefone LIKE '%".$parametro."%'";
$resultClient = $PDO->prepare($select_client);
$resultClient -> execute();
$countClient = $resultClient -> rowCount();
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>functioninitMap(){varmap=newgoogle.maps.Map(document.getElementById('map'),{center:{lat:-33.8688,lng:151.2195},zoom:13});varinput=document.getElementById('searchInput');map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);varautocomplete=newgoogle.maps.places.Autocomplete(input);autocomplete.bindTo('bounds',map);varinfowindow=newgoogle.maps.InfoWindow();varmarker=newgoogle.maps.Marker({map:map,anchorPoint:newgoogle.maps.Point(0,-29)});autocomplete.addListener('place_changed',function(){infowindow.close();marker.setVisible(false);varplace=autocomplete.getPlace();if(!place.geometry){window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
//Location details
for (var i = 0; i < place.address_components.length; i++) {
if(place.address_components[i].types[0] == 'postal_code'){
document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
}
if(place.address_components[i].types[0] == 'country'){
document.getElementById('country').innerHTML = place.address_components[i].long_name;
}
}
document.getElementById('location').innerHTML = place.formatted_address;
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('lon').innerHTML = place.geometry.location.lng();
});
}
</script>
</head>
<body>
<style>
#map {
width: 100%;
height: 400px;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#searchInput {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 50%;
}
#searchInput:focus {
border-color: #4d90fe;
}
</style>
<div class="col-md-12 col-sm-12 col-xs-12">
<? if($countClient >= 1){?>
<table class="table table-striped table-hover table-full-width">
<thead>
<tr>
<th style="padding:2px;font-size:15px;" class="d-none d-sm-table-cell">Nome</th>
<th style="padding:2px;font-size:15px;" class="d-none d-sm-table-cell">CPF</th>
<th style="padding:2px;font-size:15px;" class="d-none d-sm-table-cell">Celular</th>
</tr>
</thead>
<?php
foreach($resultClient as $row01)
{
?>
<tbody>
<tr>
<td style="padding:2px;font-size:15px;"><a href="?new_delivery_order&id_client=<?=sha1($row01['id'])?>"><?=utf8_encode($row01['nome'])?></a></td>
<td style="padding:2px 20px 0px 10px;font-size:15px;"><?=$row01['cpf']?></td>
<td style="padding:2px 20px 0px 10px;font-size:15px;"><?=$row01['celular']?></td>
</tr>
</tbody>
<?php
}
?>
</table>
<? } else{?>
<div role="alert" class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×
</span>
</button>
<strong>Ops!</strong> <small>Parece que o cliente que você pesquisou não existe cadastrado no Sistema, faça o cadastro primeiro para depois abrir um pedido para ele</small>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Cliente<span class="symbol required"></span></label>
<input type="text" class="form-control" name="cliente" placeholder="Nome do Cliente" autocomplete="off" value="<?=utf8_encode($clientName)?>">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Telefone <span class="symbol required"></span></label>
<input type="text" class="form-control" name="Telefone" placeholder="Telefone do cliente" autocomplete="off" value="<?=$clientTelephone?>">
</div>
</div>
<div class="col-md-12 col-sm-12">
<input id="searchInput" class="controls" type="text" autocomplete="off" placeholder="Enter a location">
<div id="map"></div>
<ul id="geoData">
<li>Full Address: <span id="location"></span></li>
<li>Postal Code: <span id="postal_code"></span></li>
<li>Country: <span id="country"></span></li>
<li>Latitude: <span id="lat"></span></li>
<li>Longitude: <span id="lon"></span></li>
</ul>
</div>
<?}?>
</div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?key=<MinhaAPIdoGoogleMapsjácoloqueicerto>&libraries=places&callback=initMap" async defer></script>
</html>