Ciao a tutti,
ho una pagina php che, tramite JS e PHP, ottiene due indirizzi e calcola il percorso a piedi.
Io riesco ad impostare correttamente i due indirizzi ma non riesco a far vedere la mappa, ci sarà un problema in JS.
Ci sto sbattendo la testa da due giorni e non capisco dove sia il problema!
Ho preso l'esempio "Google Maps Api 3: Geocoding" di HTML.it" e invece di usare <select> ho usato <input text> ma non riesco a far vedere la mappa!
Pongo qui il codice della pagina PHP:
codice:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Ottieni direzione a piedi</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:150%; text-align:center;}
#map { float:left; width:70%; height:95%; }
#panel { float:left; width:30%; height:95%; }
#panel table { font-size:10px; }
input { width:250px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&&language=it"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function inserimentoIndirizzo() {
document.getElementById('partenza').value = prompt("Inserisci l'indirizzo di partenza:", "Viale Franco Angeli, 5 - Roma");
}
function initialize() {
calcRoute();
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("panel"));
//Prima di "input" era select
var selectTags = document.getElementsByTagName("input");
//Fine cambiamento
for(i=0;i<selectTags.length;i++){
selectTags[i].onchange=function(){
calcRoute();
};
}
}
function calcRoute() {
var partenza = document.getElementById("partenza").value;
var arrivo = document.getElementById("arrivo").value;
var request = {
origin:partenza,
destination:arrivo,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
window.onload = initialize;
</script>
</head>
<body onLoad='inserimentoIndirizzo();'>
<div>
Partenza:
<input id="partenza" name="partenza" type="text" />
Arrivo:
<?php
$indirizzo = $_POST['indirizzoArrivo'];
echo("<input id='arrivo' name='arrivo' value='$indirizzo' type='text' />");
?>
</div>
<div id="map"></div>
<div id="panel"></div>
</body>
</html>