Sujet Précédent Sujet Suivant

Un pb au déclenchement de l'évènement Onclick

Fermé
safista Messages postés 8 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 3 octobre 2013 - 27 sept. 2013 à 15:59
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 28 sept. 2013 à 13:46
Bonjour, j'ai un pb avec ce code qui affiche une map google et calcule l'itinéraire entre 2 points saisis .Le pb c'est au niveau du boutton "calculer l'itinéraire" car en cliquant dessus ,l'action qui est le calcul ne se lance pas . Qui peut m'aider à détecter l'erreur ?? et merci d'avance .

Voici le code complet:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Itinéraire</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#EmplacementItineraireCarte, #EmplacementItineraireTexte {
height: 50%
}
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialisation(){
var LatLng = new google.maps.LatLng(34.017576,-6.836332);
var optionsCarte = {
zoom: 7,
center: LatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
maxZoom: 20,
}
var map = new google.maps.Map(document.getElementById('map'), optionsCarte);
/**
* Moteur de rendu
*/
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "RABAT",
icon : "orange-flag.jpg" // Chemin de l'image du marqueur pour surcharger celui par défaut
});

var infoWindow = new google.maps.InfoWindow({
position : latLng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});


var optionsItineraireAffichage = {
map: map
}
var itineraireAffichage = new google.maps.DirectionsRenderer(optionsItineraireAffichage); }

function calculate(){
origin = document.getElementById('origin').value; // Le point départ
destination = document.getElementById('destination').value; // Le point d'arrivé
if(origin && destination){

var request = {
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
}
var itineraireService = new google.maps.DirectionsService();
itineraireService.route(request, function(response, status) {
/**
* Si le résultat est valide on demande au moteur de rendu
* d'utiliser ce résultat pour mettre à jour l'affichage
* de l'itinéraire ( carte + roadbook)
*/
if (status === google.maps.DirectionsStatus.OK) {
itineraireAffichage.setDirections(response);
/**
* Sinon on affiche le code erreur
*/
}else{
alert('Erreur : ' + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialisation)
</script>
</head>
<style type="text/css">
body{font-family:Arial;background:#000000;margin:0px;padding:0px;}
#container{position:relative;width:990px;margin:auto;background:#FFFFFF;padding:20px 0px 20px 0px;}
#container h1{margin:0px 0px 10px 20px;}
#container #map{width:700px;height:500px;margin:auto;}
/* #container #panel{width:700px;margin:auto;}*/
#container #destinationForm{margin:0px 0px 20px 0px;background:#EEEEEE;padding:10px 20px;border:solid 1px #C0C0C0;}
#container #destinationForm input[type=text]{border:solid 1px #C0C0C0;}
</style>
<body>
<div id="container">
<h1>Itineraire</h1>
<div id="destinationForm">
<form action="" method="get" name="direction" id="direction">
<label>Depart :</label>
<input type="text" name="origin" id="origin">
<label>Destination :</label>
<input type="text" name="destination" id="destination">
<input type="button" value="Calculer l'itineraire" onClick="javascript:calculate()">
</form>
</div>
<div id="map">
<p>Veuillez patienter pendant le chargement de la carte...</p>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.12.custom.min.js"></script>
</body>
</html>

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 28/09/2013 à 01:25
va voir ici
http://www.shatimes.fr/tuto-google-map-api-v3/
et
http://www.shatimes.com/tuto-calculer-et-tracer-un-itineraire-avec-google-maps-api-v3/

télécharger le zip
http://www.shatimes.fr/googlemap/googlemap.zip
et
http://www.shatimes.fr/googlemap/calcul-itineraire.zip



Un petit merci vaut mieux qu'une grande ignorance
0
Réponse 2 / 3
safista Messages postés 8 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 3 octobre 2013
28 sept. 2013 à 01:33
Je les ai mis dans le head mais qd j'exécute la page rien ne change car ici mon pb est avec l'évènement onClick du bouton "calculer l'itinéraire" , il ne renvoit pas à la fonction javascript . Tu peux exécuter mon code pr voir
0
Réponse 3 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
28 sept. 2013 à 13:46
j'ai modifié la réponse ci dessus essaie comme ci dessus (les zip et les tutos)

non je ne peux pas executer ton script j'ai pas les jquery
0

Discussions similaires

Brouillon événement facebook
Magueul -
Laurie -

1 réponse
Compteur d'événement de haute précision
Messalla -
Messalla -

1 réponse
nvlddmkm l'éternel problème.
Virushana -
Virushana -

2 réponses
Pb de connexion au service d'événements systm
jufay -
iceman9573 -

58 réponses
" Mise à jour league of legends "
KipixV2 -
ekomz -

13 réponses