Distances entre les principales villes du Bénin

Se servir de l’API Google maps pour afficher la distance entre les villes du Bénin.

L’on cherche à faire ceci :.

Cela donne une liste des villes du Bénin à gauche juste grâce à une sélection simple :

<option value="Abomey">Abomey</option>
<option value="Abomey-Calavi">Abomey-Calavi</option>
<option value="Allada">Allada</option>
<option value="Aplahoué">Aplahoué</option>
<option value="Athiémé">Athiémé</option>
<option value="Banikoara">Banikoara</option>
<option value="Bassila">Bassila</option>
<option value="Bembéréké">Bembéréké</option>
<option value="Bétérou">Bétérou</option>
<option value="Bohicon">Bohicon</option>
<option value="Bori">Bori</option>
<option value="Comè">Comè</option>
<option value="Cotonou">Cotonou</option>
<option value="Cové">Cové</option>
<option value="Dassa-Zoumè">Dassa-Zoumè</option>
<option value="Djougou">Djougou</option>
<option value="Dogbo-Tota">Dogbo-Tota</option>
<option value="Grand Popo">Grand Popo</option>
<option value="Kandi">Kandi</option>
<option value="Kérou">Kérou</option>
<option value="Kétou">Kétou</option>
<option value="Kouandé">Kouandé</option>
<option value="Lokossa">Lokossa</option>
<option value="Malanville">Malanville</option>
<option value="Natitingou">Natitingou</option>
<option value="N'Dali">N'Dali</option>
<option value="Nikki">Nikki</option>
<option value="Ouidah">Ouidah</option>
<option value="Parakou">Parakou</option>
<option value="Pobé">Pobé</option>
<option value="Porto Novo">Porto Novo</option>
<option value="Sakété">Sakété</option>
<option value="Savalou">Savalou</option>
<option value="Savé">Savé</option>
<option value="Segbana">Segbana</option>
<option value="Tanguiéta">Tanguiéta</option>
<option value="Tchaourou">Tchaourou</option>

Cette liste est faite des villes de départ. Une autre liste à droite comporte les villes d’arrivée.
Il serait également possible d’en faire juste un champ de recherche afin que l’utilisateur y saisisse un nom de ville...

Le code complet :

<!DOCTYPE html>
<html>
<head>
<title>B&eacute;nin - Calculateur de distance</title>
<meta name="description" content="Le calculateur de distance vous donne la distance par la route entre  deux villes du B&eacute;nin. "/>
<meta charset="utf-8">
<style>
html, body, #map-canvas {
        margin: 5px;
        margin-left: 10px;
        padding: 5px;
        height: 80%;
        width:70%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=fr"></script>
<script>
 
             var directionsDisplay;
             var directionsService = new google.maps.DirectionsService();
             var map;
 
             function initialize() {
             directionsDisplay = new google.maps.DirectionsRenderer();
             var cotonou = new google.maps.LatLng(7,2);
             var mapOptions = {
             zoom:9,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             center: cotonou
             }
             map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
             directionsDisplay.setMap(map);
 
             }
 
             function calcRoute() {
             var start = document.getElementById("start").value;
             var end = document.getElementById("end").value;
 
 
            // var waypts = [];
             //var checkboxArray = document.getElementById('waypoints');
             //for (var i = 0; i < checkboxArray.length; i++) {
             //if (checkboxArray.options[i].selected == true) {
             //waypts.push({
             //location:checkboxArray[i].value,
             //stopover:true});
             //}
             //}
 
 
             var request = {
             origin:start,
             destination:end,
            // waypoints:waypts,
             travelMode: google.maps.TravelMode.DRIVING
             };
             directionsService.route(request, function(response, status) {
             if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
             var route = response.routes[0];
             //  alert(route.legs[1].duration.text);
             var summaryPanel = document.getElementById('directions_panel');
             summaryPanel.innerHTML = '';
             // For each route, display summary information.
             for (var i = 0; i < route.legs.length; i++) {
             var routeSegment = i + 1;
             summaryPanel.innerHTML += '<b>Calcul de distance</b><br>';
             summaryPanel.innerHTML += route.legs[i].start_address + ' &agrave; ';
             summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
             summaryPanel.innerHTML += route.legs[i].duration.text + '<br>';
             summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
             }
 
             }
             });
             }
             google.maps.event.addDomListener(window, 'load', initialize);
 
             </script>
<style>
.main {
        width:80%;
        height:800%;
}
.selectionstylee select {
        background: #cfc;
        width: 268px;
        padding: 5px;
        font-size: 16px;
        line-height: 1;
        border: 0;
        border-radius: 0;
        height: 34px;
        -webkit-appearance: none;
}
</style>
</head>
<body>
<h1>B&eacute;nin : Distance entre deux villes</h1>
<div class="selectionstylee"> <strong>De: </strong>
 <select id="start" onChange="calcRoute();">
   <option value="">Choisir Ville de d&eacute;part</option>
   <option value="Abomey">Abomey</option>
   <option value="Abomey-Calavi">Abomey-Calavi</option>
   <option value="Allada">Allada</option>
   <option value="Aplahou&eacute;">Aplahou&eacute;</option>
   <option value="Athi&eacute;m&eacute;">Athi&eacute;m&eacute;</option>
   <option value="Banikoara">Banikoara</option>
   <option value="Bassila">Bassila</option>
   <option value="Bemb&eacute;r&eacute;k&eacute;">Bemb&eacute;r&eacute;k&eacute;</option>
   <option value="B&eacute;t&eacute;rou">B&eacute;t&eacute;rou</option>
   <option value="Bohicon">Bohicon</option>
   <option value="Bori">Bori</option>
   <option value="Come, Mono, Benin">Com&egrave;</option>
   <option value="Cotonou">Cotonou</option>
   <option value="Cov&eacute;">Cov&eacute;</option>
   <option value="Dassa-Zoum&egrave;">Dassa-Zoum&egrave;</option>
   <option value="Djougou">Djougou</option>
   <option value="Dogbo-Tota">Dogbo-Tota</option>
   <option value="Grand Popo">Grand Popo</option>
   <option value="Kandi">Kandi</option>
   <option value="K&eacute;rou">K&eacute;rou</option>
   <option value="K&eacute;tou">K&eacute;tou</option>
   <option value="Kouand&eacute;">Kouand&eacute;</option>
   <option value="Lokossa">Lokossa</option>
   <option value="Malanville">Malanville</option>
   <option value="Natitingou">Natitingou</option>
   <option value="N'Dali">N'Dali</option>
   <option value="Nikki">Nikki</option>
   <option value="Ouidah">Ouidah</option>
   <option value="Parakou">Parakou</option>
   <option value="Pob&eacute;">Pob&eacute;</option>
   <option value="Porto Novo">Porto Novo</option>
   <option value="Sak&eacute;t&eacute;">Sak&eacute;t&eacute;</option>
   <option value="Savalou">Savalou</option>
   <option value="Sav&eacute;">Sav&eacute;</option>
   <option value="Segbana">Segbana</option>
   <option value="Tangui&eacute;ta">Tangui&eacute;ta</option>
   <option value="Tchaourou">Tchaourou</option>
 </select>
 <strong>Vers: </strong>
 <select id="end" onChange="calcRoute();">
   <option value="">Choisir Ville d'arriv&eacute;e</option>
   <option value="Abomey">Abomey</option>
   <option value="Abomey-Calavi">Abomey-Calavi</option>
   <option value="Allada">Allada</option>
   <option value="Aplahou&eacute;">Aplahou&eacute;</option>
   <option value="Athi&eacute;m&eacute;">Athi&eacute;m&eacute;</option>
   <option value="Banikoara">Banikoara</option>
   <option value="Bassila">Bassila</option>
   <option value="Bemb&eacute;r&eacute;k&eacute;">Bemb&eacute;r&eacute;k&eacute;</option>
   <option value="B&eacute;t&eacute;rou">B&eacute;t&eacute;rou</option>
   <option value="Bohicon">Bohicon</option>
   <option value="Bori">Bori</option>
   <option value="Come, Mono, Benin">Com&egrave;</option>
   <option value="Cotonou">Cotonou</option>
   <option value="Cov&eacute;">Cov&eacute;</option>
   <option value="Dassa-Zoum&egrave;">Dassa-Zoum&egrave;</option>
   <option value="Djougou">Djougou</option>
   <option value="Dogbo-Tota">Dogbo-Tota</option>
   <option value="Grand Popo">Grand Popo</option>
   <option value="Kandi">Kandi</option>
   <option value="K&eacute;rou">K&eacute;rou</option>
   <option value="K&eacute;tou">K&eacute;tou</option>
   <option value="Kouand&eacute;">Kouand&eacute;</option>
   <option value="Lokossa">Lokossa</option>
   <option value="Malanville">Malanville</option>
   <option value="Natitingou">Natitingou</option>
   <option value="N'Dali">N'Dali</option>
   <option value="Nikki">Nikki</option>
   <option value="Ouidah">Ouidah</option>
   <option value="Parakou">Parakou</option>
   <option value="Pob&eacute;">Pob&eacute;</option>
   <option value="Porto Novo">Porto Novo</option>
   <option value="Sak&eacute;t&eacute;">Sak&eacute;t&eacute;</option>
   <option value="Savalou">Savalou</option>
   <option value="Sav&eacute;">Sav&eacute;</option>
   <option value="Segbana">Segbana</option>
   <option value="Tangui&eacute;ta">Tangui&eacute;ta</option>
   <option value="Tchaourou">Tchaourou</option>
 </select>
</div>
<div id="map-canvas"></div>
<div id="map-canvas" style="float:left;width:250px; "></div>
<div id="directions_panel" style="margin:20px;background-color:#CFC; width:60%;text-align:left; padding-left:10px;"></div>
</body>
</html>

18552 visites depuis le 22 avril 2014. Pour citer cet article :
Simon Florentin Adjatan, Distances entre les principales villes du Bénin. [En ligne : http://adjatan.org/tics-et-astuces/article/distances-entre-les-principales-villes-du-benin] Consulté le 02-12-16

Vos commentaires

Un message, un commentaire ?

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.