Jump to content

Google API vers Bases de données


MathieuClem
 Share

Recommended Posts

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>
Link to comment
Share on other sites

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... 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...