Google API vers Bases de données

MathieuClem · 9 mai 2014

Bonjour bonjour,
Dans le cadre de la fac, on doit créer de toute pièce un site web.
Le but du site est en gros de tracer son parcours de footing sur une map google, d'indiquer les conditions de la course (date/temps etc etc) et de faire partager le trajet, pour pouvoir courir à plusieurs au lieu de faire son footing tout seul.

Je me suis occupé de la partie CSS du site, et mon camarade s'occupe de la base de données et de l'API Google Maps, et il a un soucis. Je suis pas assez fort pour pouvoir vous expliquer, donc je vous retranscrit son message :

"je n'arrive pas à écrire le code qui récupère les infos fournies par getDirections() et le transfert à la page php parce que je ne comprend pas ce que je dois écrire... Bref, la partie ajax je ne comprend pas comment l'écrire, la partie php ça va à peu près, mais aucun intérêt si je n'arrive pas à écrire l'ajax."

Est-ce que vous avez une solution ? Votre aide nous serait précieuse, on pensait réussir, mais on doit rendre le site niquel pour lundi soir.

Je vous remercie !

Voici notre code php pour la map.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Runtime map</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 25%;
        ;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
    <script>
// autorise la modification de l'itinéraire à la main
var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;

// initialise la carte avec ses différentes fonctionnalités 
function initialize() {
  	var mapOptions = {
    	zoom:5,
    	center: new google.maps.LatLng(44.833, -0567),
    	// Modifie l'apparence des outils de contrôle de la map
    	mapTypeControl: true,
    	mapTypeControlOptions: {
      		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    	},
    	zoomControl: true,
    	zoomControlOptions: {
      		style: google.maps.ZoomControlStyle.SMALL
    	},
    	streetViewControl: false,
    	scaleControl: true,
    };
  	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  	// autorise la modification de l'itinéraire à la main.
  	directionsDisplay.setMap(map);
  	directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  	google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    	computeTotalDistance(directionsDisplay.getDirections());
    	
    	
    	alert('d'+directionsDisplay.getDirections().routes[0].legs[0].via_waypoints[0]);
  	});
  
  // applique la météo
	var weatherLayer = new google.maps.weather.WeatherLayer({
    	temperatureUnits: google.maps.weather.TemperatureUnit.DEGREES
  	});
  	weatherLayer.setMap(map);

  	calcRoute();
}

// calcul de l'itinéraire
function calcRoute(start, end) {
  	var start = document.getElementById('start').value;
  	var end = document.getElementById('end').value;
  	var request = {
    	origin:start,
      	destination:end,
      	travelMode: google.maps.TravelMode.WALKING
  	};
  	directionsService.route(request, function(response, status) {
    	if (status == google.maps.DirectionsStatus.OK) {
      		directionsDisplay.setDirections(response);
    	}
  	});
}

//calcul de la distance parcourue
function computeTotalDistance(result) {
  	var total = 0;
  	var myroute = result.routes[0];
  	for (var i = 0; i < myroute.legs.length; i++) {
    	total += myroute.legs[i].distance.value;
  	}
  	total = total / 1000.0;
  	document.getElementById('total').innerHTML = total + ' km';
}

google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
  	<body>
    	<div id="panel">
    		<form id="calculate-route" name="calculate-route" action="#" method="get">
      			<label for="from">From:</label>
      			<input type="text" id="start" name="from" required="required" placeholder="Run starts here" size="30" />
 
      			<label for="to">To:</label>
      			<input type="text" id="end" name="to" required="required" placeholder="Run ends here" size="30" />
      			<br />
      			
      			<input type="button" value="Calculer l'itinéraire" onclick="javascript:calcRoute(start, end)" />
    		</form>
    	</div>
    	<div id="map-canvas" style="float:left;width:75%; height:100%"></div>
    	<div id="directionsPanel" style="float:right;width:25%;height 100%">
    	<p>Total Distance: <span id="total"></span></p>
    </div>
  </body>
</html>

MathieuClem · 10 mai 2014

Personne est calé en codage web :confused: ?

Luc · 10 mai 2014

Dans mon cas, absolument pas. Quand je vois comment je galère sous Python pour créer un pauv' programme de merde... C'est pas pour rien que j'ai pris l'option SI++ au 2nd semestre

Désolé de ne pas pouvoir t'aider...

Connexion

Google API vers Bases de données

Messages recommandés

MathieuClem

Lien vers le commentaire

Partager sur d’autres sites

MathieuClem

Lien vers le commentaire

Partager sur d’autres sites

Luc

Lien vers le commentaire

Partager sur d’autres sites

Join the conversation

Retour sur Consomac

Naviguer

Activité