Bonjour à tous, je suis nouveau sur le forum même si je suis depuis bien longtemps ce site
Je crée aujourd'hui un post car j'ai besoin d'un petit peu d'aide pour un script que j'ai réalisé en HTML/JS mais que j'aimerais adapté à wordpress et donc utilisé PHP (en faire un plugin).
Donc voilà mon code JS :
Et voilà mon code HTML :
Sauf que voilà le problème, dans mon code actuel, il faut aller modifier manuellement les coordonnées et description de mon adresse et j'aimerais pouvoir à partir d'un formulaire en php modifier mes variables JS, des idées ?

Je crée aujourd'hui un post car j'ai besoin d'un petit peu d'aide pour un script que j'ai réalisé en HTML/JS mais que j'aimerais adapté à wordpress et donc utilisé PHP (en faire un plugin).
Donc voilà mon code JS :
var destMap = {
map : null, //the google map
marker : null,
directionsService : null, //service that provides directions to get to our destination
directionsDisplay : null, //rendeder that draws directions on map
destinationName : null,
geocoder : null,
initialize: function(none) {
var city = new google.maps.LatLng(45.7480324, 4.8433883); //Coordinate the destination address.
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: city
};
destMap.map = new google.maps.Map(document.getElementById("map"), myOptions);
destMap.marker = new google.maps.Marker({position: city,map : destMap.map,title:"description"}); //Description of the destination address /*To change*/
destMap.directionsDisplay = new google.maps.DirectionsRenderer();
destMap.directionsDisplay.setMap(destMap.map);
destMap.directionsDisplay.setPanel(document.getElementById("route"));
destMap.directionsService = new google.maps.DirectionsService();
destMap.geocoder = new google.maps.Geocoder();
},
initiate_geolocation: function() {
if (navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {
destMap.geocode({
"lat": position.coords.latitude,
"lng": position.coords.longitude
});
}
navigator.geolocation.getCurrentPosition(getLocation, destMap.error);
} else {
// Google AJAX API fallback GeoLocation
if (typeof google == 'object') {
if (google.loader.ClientLocation) {
destMap.geocode({
"lat": google.loader.ClientLocation.latitude,
"lng": google.loader.ClientLocation.longitude
});
}
}
}
},
geocode : function(l) {
latLng = new google.maps.LatLng(l.lat, l.lng);
destMap.geocoder.geocode( { 'latLng': latLng }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].formatted_address);
document.getElementById('start').value = results[0].formatted_address;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
},
route : function(l)
{
var request = {
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
destMap.directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
destMap.directionsDisplay.setDirections(result);
}
else if (status == google.maps.DirectionsStatus.NOT_FOUND) {
alert("No corresponding geographic location could be found for the specified address. This may be due to a recent address, or incorrect.");
}
});
},
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;
}
}
};
Et voilà mon code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/map.css" type="text/css" media="screen">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://www.google.com/jsapi"></script>
<script src="js/map-English.js"></script>
</head>
<body onload="destMap.initialize();">
<div id="header"></div>
<div id="content">
<div class="article">
<center><h1>Itinerary</h1></center>
<div id="form"><form>
<table class="iti" border="0" width="696">
<tbody>
<tr valign="top">
<td align="right"><label for="start">Start :</label></td>
<td align="left"><input id="start" name="from"style="width:90%" type="text" /></td>
<td style="width:40%" align="right" valign="middle"><input id ="get" onclick="destMap.initiate_geolocation();
" type="button" value="Find my address" /></td>
</tr>
<tr>
<td align="right"><label for="end">End :</label></td>
<td align="left"><input id="end" name="to" readonly="readonly"style="width:90%" type="text" value="9 rue des landes, Craponne" /></td>
<td style="width:40%" align="right"><input id ="get" onclick="destMap.route();
" type="button" value="Itinerary" /></td>
</tr>
</tbody>
</table>
</form>
<div id="contentmap">
<div id="map"></div>
<div id="route"></div>
<div id="calage"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Sauf que voilà le problème, dans mon code actuel, il faut aller modifier manuellement les coordonnées et description de mon adresse et j'aimerais pouvoir à partir d'un formulaire en php modifier mes variables JS, des idées ?
