API Google maps não funciona no Servidor PHP
Estou desenvolvendo uma aplicação que calcula a distancia entre dois endereços sendo um ja pré determinado usando a API V3 do Google Maps ,porém quando vou rodar a aplicação no servidor php, ela não funciona
Segue abaixo o codigo completo
PS: Sou novato nisso tudo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
<title>Lampada</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">PSHE
<br> </h1>
</div>
</div>
</div>
</div>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-9">
<label for="txtDestino">
<strong>Digite seu Endereço</strong>
</label>
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="text" id="txtDestino" class="field" style="width: 400px;"> </div>
<br>
<br>
<div class="col-md-9">
<select name="cidade" id="cidade" type="text">
<option>Selecione...</option>
<option value="Sorocaba">Sorocaba</option>
<option value="Votorantim">Votorantim</option>
</select>
</div>
</div>
</form>
<br>
<br>
<div class="row">
<div class="col-md-12">
<input type="button" value="Calcular distância" onclick="CalculaDistancia()" class="btnNew"> </div>
</div>
<br>
<br>
<div>
<span id="litResultado"> </span>
</div>
<div>
</div>
</div>
</div>
<div class="py-5 text-white bg-warning">
<div class="container">
<div class="row">
<div class="col-md-12 mt-3 text-center">
<p>Rua Armando Caldini
<br>Sorocaba -SP
<br>
<br>(15) 99614-5279
<br>© Grupo PSHE - Todos os Direitor reservados</p>
</div>
</div>
</div>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function CalculaDistancia() {
$('#litResultado').html('Aguarde...');
//Instanciar o DistanceMatrixService
var service = new google.maps.DistanceMatrixService();
//executar o DistanceMatrixService
service.getDistanceMatrix(
{
//Origem
origins: ["Rua Armando Caldini 161 Sorocaba"],
//Destino
destinations: [$("#txtDestino").val() + $("#cidade").val()],
//Modo (DRIVING | WALKING | BICYCLING)
travelMode: google.maps.TravelMode.DRIVING,
//Sistema de medida (METRIC | IMPERIAL)
unitSystem: google.maps.UnitSystem.METRIC
//Vai chamar o callback
}, callback);
}
//Tratar o retorno do DistanceMatrixService
function callback(response, status) {
//Verificar o Status
if (status != google.maps.DistanceMatrixStatus.OK)
//Se o status não for "OK"
$('#litResultado').html(status);
else {
//Se o status for OK
//Endereço de destino = response.destinationAddresses
//Distância = response.rows[0].elements[0].distance.text
//Preco = response.rows[0].elements[0].distance.value*0.0009).toFixed(2)
//Duração = response.rows[0].elements[0].duration.text
$('#litResultado').html(
"<strong>Destino:</strong> " + response.destinationAddresses +
"<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
"<br /><strong>Preço</strong>: " +"R$: "+(response.rows[0].elements[0].distance.value*0.0009).toFixed(2)+
" <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text
);
}
}
</script>
</body>
</html>Discussão (1)
Carregando comentários...