11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous, je suis nouveau sur le forum même si je suis depuis bien longtemps ce site Smiley lol

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 ? Smiley confus
Bonjour,

Une piste sans doute : pour passer une variable, par exemple $nom, de PHP vers javascript, il suffit de la définir comme suit dans le code JS :

var NomVariable = "<?php echo $nom; ?>" ;
Je savais pas que l'on pouvait faire ça Smiley eek
Bon bah ma question, dérive et se change en, comment geocoder avec php ? Smiley biggrin