Problema esempio Google Geocoding e input text

**Power Dragon** · 17-09-2013, 18:20

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&amp;&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>

**Vindav** · 18-09-2013, 10:01

l'evento onload va richiamato una sola volta, mentre tu lo richiami nel body e nella parte js.
Elimina l'onload nel body e richiama la funzione inserimentoIndirizzo nella funzione inizialize (come fai con calcRuote)

Discussione: Problema esempio Google Geocoding e input text

Strumenti discussione

Ricerca discussione

Visualizza

Problema esempio Google Geocoding e input text

Permessi di invio