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>

A voir également:

Un pb au déclenchement de l'évènement Onclick
Onglet évènement facebook disparu ✓ - Forum Facebook
La description de l’id d’événement 0 dans la source nvlddmkm est introuvable. le composant qui a déclenché cet événement n’est pas installé sur l’ordinateur local ou l’installation est endommagée. vous pouvez installer ou réparer le composant sur l’ordinateur local. - Windows 11
Evenement whatsapp - Accueil - Messagerie instantanée
Evenement 410 kernel pnp ✓ - Forum Windows 10
Comment créer un événement sur whatsapp - Accueil - WhatsApp

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 737
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

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

Réponse 3 / 3

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
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

Discussions similaires

Disparition de l'onglet "événements" sur les Groupes FB

probléme avec mes événements sur facebook

" Mise à jour league of legends "

Onglet "Evenements" facebook

Brouillon événement facebook