Adaptation fonction API Google Map v3

Bonjour à toutes et à tous ,
J'utilise un bout de code de l'api google map V3 pour calculer une distance et afficher un trajet.
J'ai ajouter ceci au code :

 var input = document.getElementById("villedepart");addressChange(input);	

car sinon la fonction ne se déclenchait qu'après un clic sur le input qui dans mon cas est déjà préremplis.
Cela fonctionne bien pour le calcul de distance mais la map google est devenu statique, on ne peux plus zoomer, voir le tracé du trajet, etc ..

Je pense que la fonction ci-dessous pose probleme.
Ce que je ne comprends pas, c'est que je ne puisse pas la supprimer (sinon plus rien ne se passe)


function addressChange(input_text)
{
if (input_text.id == 'villedepart')
villedepart = input_text.value;
else
villearrive = input_text.value;
if (villedepart != '' && villearrive != '')
{
Que puis je faire pour évincer cette fonction pour le script prenne juste en compte le contenu de mes inputs ?
Merci d'avance

la fonction complète et une balise code plz

Merci de participer à mon topic JJK801
Voici mon code javascript :

<script type="text/javascript">
		var directionDisplay;
		var directionsService = new google.maps.DirectionsService();
		var villedepart;
		var villearrive;
		var maCarte;
		var input;
		function initialize() {
		
                    var input = document.getElementById("villedepart");addressChange(input);	
		    var tours = new google.maps.LatLng(46.585294,0.351563);
		    var optionsCarte = {
				zoom: 7,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: tours
			}
				maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);	   
		}
		function addressChange(input_text)
	{
	
		if (input_text.id == 'villedepart')
 				
				villedepart = input_text.value;
			else
				villearrive = input_text.value;			
				
			if (villedepart != '' && villearrive != '')
				
				{
				directionsDisplay = new google.maps.DirectionsRenderer();
				
				directionsDisplay.setMap(maCarte);
				
				var requeteItineraire = {
					origin: villedepart,
					destination: villearrive,
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				};	
			  directionsService.route(requeteItineraire, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
					var distance = response.routes[0].legs[0].distance.value;
					var duree = response.routes[0].legs[0].duration.value;
					document.getElementById('distance_parcouru').innerHTML = distance/1000 + " km";
					document.getElementById("distance_parcourue_input").value = distance/1000;
					document.getElementById('duration').innerHTML = Math.round((duree/3600)*10)/10 + " heure";
					}
				else
				{
					alert("Addresse de d&eacut;part ou d'arrivé incorrecte");
}
});
}	
}
	</script>

Dans laquelle j'ai ajouté :

var input = document.getElementById("villedepart");addressChange(input);	

Je ne suis pas expert dans cette API mais je pense qu'il serai plus convenable de d'abord initialiser ta carte et déclarer ta fonction:

function initialize() {
  var tours = new google.maps.LatLng(46.585294,0.351563);
  var type = google.maps.MapTypeId.ROADMAP;
  var optionsCarte = {
    zoom: 7,
    mapTypeId: type,
    center: tours
  }

  maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"),optionsCarte);

  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(maCarte);
}

function addressChange(input_text){
  if (input_text.id == 'villedepart')
    villedepart = input_text.value;
  else
    villearrive = input_text.value;	

  if (villedepart && villearrive){

    var requeteItineraire = {
      origin: villedepart,
      destination: villearrive,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };	

    directionsService.route(requeteItineraire, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);

        var distance = response.routes[0].legs[0].distance.value;
	var duree = response.routes[0].legs[0].duration.value;
	
        document.getElementById('distance_parcouru').innerHTML = distance/1000 + " km";
	document.getElementById("distance_parcourue_input").value = distance/1000;
	document.getElementById('duration').innerHTML = Math.round((duree/3600)*10)/10 + " heure";
      }
      else
      {
	 alert("Addresse de départ ou d'arrivé incorrecte");
      }
    });
  }	
}

et enfin charger tes données:

addressChange(document.getElementById('villededepart')); // Définition de la ville de départ

Code complet: (et légérement optimisé )

<script>
/* GM PARAMS */

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var villedepart;
var villearrive;
var maCarte;

/* DOM ELMTS */

var dispMap = document.getElementById("EmplacementDeMaCarte");
var dispDP = document.getElementById('distance_parcouru');
var dispDuree = document.getElementById('duration');
var inpDP = document.getElementById("distance_parcourue_input");

/* GM INIT */

function initialize() {
  var tours = new google.maps.LatLng(46.585294,0.351563);
  var type = google.maps.MapTypeId.ROADMAP;
  var optionsCarte = {
    zoom: 7,
    mapTypeId: type,
    center: tours
  }

  maCarte = new google.maps.Map(dispMap,optionsCarte);

  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(maCarte);
}

/* GM WAY CHANGE */

function addressChange(input_text){
  if (input_text.id == 'villedepart')
    villedepart = input_text.value;
  else
    villearrive = input_text.value;	

  if (villedepart && villearrive){

    var requeteItineraire = {
      origin: villedepart,
      destination: villearrive,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };	

    directionsService.route(requeteItineraire, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);

        var distance = response.routes[0].legs[0].distance.value;
	var duree = response.routes[0].legs[0].duration.value;
	
        dispDP.innerHTML = distance/1000 + " km";
	inpDP.value = distance/1000;
	dispDuree.innerHTML = Math.round((duree/3600)*10)/10 + " heure";
      } else {
	 alert("Addresse de départ ou d'arrivé incorrecte");
      }
    });
  }	
}

addressChange(document.getElementById('villededepart'));
</script>

Ps: bien entendu se script doit être placé tout à la fin du body html
Modifié par JJK801 (14 Nov 2012 - 14:44)