Un pb au déclenchement de l'évènement Onclick
safista
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
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>
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
- Creer un evenement sur whatsapp - Accueil - WhatsApp
- La description de l’id d’événement 153 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
- Un evenement inattendu s'est produit league of legends ✓ - Forum jeux en ligne
- Evenement whatsapp - Accueil - Messagerie instantanée
- Problème League Of Legends ✓ - Forum Jeux vidéo
3 réponses
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
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