Bonjour à toutes et à tous !
J'ai un souci depuis quelques jours, j'ai récupéré un script pour faire un itinéraire sur mon site web avec googlemap et dans le script, le bouton d'envoi ne fonctionne que si on clique dessus, j'aimerais donc pouvoir valider mon formulaire via le bouton ENTER, simple me direz-vous ? Pas pour moi ! :)
Voici le code de ma page JS :
[code]
(function () {
function Map(address, desc, title, markerico, spanId) {
var me = this;
this.spanId = spanId;
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
this.map = new google.maps.Map(document.getElementById("map-" + this.spanId), myOptions);
this.contentString = (desc);
this.directionsDisplay = new google.maps.DirectionsRenderer();
this.directionsDisplay.setMap(this.map);
this.directionsDisplay.setPanel(document.getElementById("route-" + this.spanId));
this.marker = new google.maps.Marker({
position: city,
map: this.map,
title: title,
icon: markerico,
animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: this.contentString
});
google.maps.event.addListener(this.marker, 'click', function () {
infowindow.open(me.map, me.marker);
});
this.directionsService = new google.maps.DirectionsService();
this.geocoder = new google.maps.Geocoder();
var city = address;
this.geocoder.geocode({ 'address': city }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
address = results[0].formatted_address;
me.map.setCenter(results[0].geometry.location);
me.marker.setOptions({
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
Map.prototype.route = function() {
var me = this;
var request = {
origin: document.getElementById('start-' + this.spanId).value,
destination: document.getElementById('end-' + this.spanId).value,
travelMode : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
};
me.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
me.directionsDisplay.setDirections(result);
} else if (status == google.maps.DirectionsStatus.NOT_FOUND) {
alert("Vous devez écrire une adresse pour calculer un itinéraire");
}
});
};
Map.prototype.error = function (e) {
switch (e.code) {
case e.TIMEOUT:
alert('Timeout');
break;
case e.POSITION_UNAVAILABLE:
alert('Position unavailable');
break;
case e.PERMISSION_DENIED:
alert('Permission denied.');
break;
case e.UNKNOWN_ERROR:
alert('Unknown error');
break;
}
};
Map.prototype.geocode = function (l) {
latLng = new google.maps.LatLng(l.lat, l.lng);
var me = this;
me.geocoder.geocode({
'latLng': latLng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].formatted_address);
document.getElementById('start-' + me.spanId).value = results[0].formatted_address;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
Map.prototype.initiate_geolocation = function() {
var me = this;
console.log(this, this.spanId);
if (navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {
me.geocode({
"lat": position.coords.latitude,
"lng": position.coords.longitude
});
}
navigator.geolocation.getCurrentPosition(getLocation, this.error);
} else if(typeof google == 'object') { // Google AJAX API fallback GeoLocation
if (google.loader.ClientLocation) {
this.geocode({
"lat": google.loader.ClientLocation.latitude,
"lng": google.loader.ClientLocation.longitude
});
}
}
};
function createMaps() {
var spans = document.getElementsByTagName("SPAN");
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
if (span.className != 'mapgen')
continue ;
var spanId = span.id;
var organisation = span.getAttribute('data-org');
var phone = span.getAttribute('data-phone');
var url = span.getAttribute('data-url');
var email = span.getAttribute('data-email');
var title = span.getAttribute('data-title');
var desc = span.getAttribute('data-desc');
var street = span.getAttribute('data-street');
var city = span.getAttribute('data-city');
var country = span.getAttribute('data-country');
var image = span.getAttribute('data-image');
var markerico = span.getAttribute('data-marker');
var mode = span.getAttribute('data-mode');
var address = '' + street + ',' + city + ',' + country + '.';
var orgid = organisation.replace(/ /g, "-");
if ( mode == "only") {
var htmlmap = '<div class="form-gmaps clearfix" id="form-gmaps-'+spanId+'" >'
+'<input class="end hidden" id="end-'+spanId+'" name="to" readonly="readonly" type="text" value="Los Angeles" />'
+' <div class="contentmap" id="contentmap-'+spanId+'" >'
+' <div class="map" id="map-'+spanId+'" ></div> '
+' </div> '
+'</div>';
document.getElementById(spanId).innerHTML += htmlmap;
} else if (mode == "itinerary") {
var htmlmap = '<div class="form-gmaps clearfix" id="form-gmaps-'+spanId+'" >'
+'<form style="display:block;" id="geoloc-'+spanId+'" name="geoloc" action="" method="post">'
+' <table class="iti">'
+' <tbody>'
+' <tr valign="top">'
+' <td align="right" class="o">'
+' <label for="start" class="1-1">DEPART :</label>'
+' </td>'
+' <td align="left" valign="middle" class="depart">'
+' <input id="start-'+spanId+'" name="from" class="start n" type="text"onKeyPress="if (event.keyCode == 13) mafonction()" >'
+' </td>'
// +' <td class="t fy" align="right" valign="middle">'
// +' <input class="get" id="geo-'+spanId+'" type="button" value="Me localiser">'
// +' </td>'
+' <td class="f fy" align="left">'
+' <input class="orangebutton" id="iti-'+spanId+'" type="button" value="Itinéraire">'
+' </td>'
+' <td align="left">'
+' <input class="end" id="end-'+spanId+'" name="to" readonly="readonly" class="n" type="hidden" value="'+address+'">'
+' </td>'
+' <td class="f fy" align="right">'
+' <span class="alignright"><a href="http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee?end=2%2C+All%C3%A9e+de+l%27Est%2C+93190%2C+Livry-Gargan" target="_blank"class="ratpbutton"><img src="img/ratp.png" alt="">TRAIN / BUS</a></span>'
+' </td>'
+' </tr>'
+' </tbody>'
+' </table>'
+'</form>'
+'<div class="contentmap" id="contentmap-'+spanId+'" >'
+' <div id="map-'+spanId+'" class="map"></div> '
+'</div> '
+'</div>';
document.getElementById(spanId).innerHTML += htmlmap;
}
var desctot = '<div id="hcard-'+orgid+'" class="vcard">'
+'<div class="org" style=\"font-family:sans-serif;\">'
+' <b>'+organisation+'</b>'
+'</div>'
+'<hr>'
+'<span style=\"font-size:12px;line-height:20px;font-family:sans-serif;\">'
+' <b style="display:inline-block;">Adresse : </b>'
+' <div class="adr" style="display:inline-block;">'
+' <div class="street-address" style="display:inline-block;"> '+street+'</div>, <span class="locality">'+city+'</span>'
+' </div>'
+' </span>'
+'</div>';
var map = new Map(address, desctot, title, markerico, spanId);
if (mode == "itinerary") {
var tmap = map; // Create a copy of map in tmap to use in onclick callback
document.getElementById('iti-'+spanId+'').onclick = function () { tmap.route() };
document.getElementById('geo-'+spanId+'').onclick = function () { tmap.initiate_geolocation() };
}
}
};
google.maps.event.addDomListener(window, 'load', createMaps);
}
)();
function mafonction()
{
alert("You pressed a key inside the input field");
};
[/code]
Je vous ai mis tout le fichier, désolée de la longueur
Dans les dernières ligne et 175, j'ai fais des tests ou je créée une fonction "mafonction", malheureusement, je me suis aperçu qu'elle fonctionnait qu'en dehors de la fonction principal.
Conclusion, j'ai un champ "start" avec un bouton "itinéraire", j'aimerais pouvoir cliquer sur ENTER pour valider ce champ.
Je ne connais pas le javascript, j'espère que vous pourrez m'aider à régler ce souci qui me hante ^^
Merci beaucoup !
Lau'