CodePen Embed - Google Map et le calcul kilométrique

<body>
  <main>
    <h1>Google Map et le calcul kilométrique</h1>
    <br></br>
  <form method="post" class="form">
    <div class="form_input w--70">
      <label for="zip">CP</label>
      <p class="color_dark pb">
        Entrez votre code postal et trouvez le
        bureau le
        plus
        proche de chez vous.
      </p>
      <input name="zip" id="zip" placeholder="ex. 1310*" autocomplete="CP" type="text" />
    </div>
  </form>
  <br></br>
<div class="pad w--70">
  <ul>
    <li data-id="1" data-adresse="Provinciestraat, 2018 Antwerpen">Provinciestraat, 2018 Antwerpen</li>
    <li data-id="2" data-adresse="5024 Namur Rue Notre Dame du Vivier 153">5024 Namur Rue Notre Dame du Vivier 153</li>
    <li data-id="3" data-adresse="54 Bd d'Avroy, 4000 Liège">54 Bd d'Avroy, 4000 Liège</li>
  </ul>
  <div id="map" style="display: none;"></div>
  <div id="js_mapResult" class="mb bold" style="display: none;">
    <p class="color_dark">
      <span id="js_name" class="color_primary"></span>
      est l'abbaye la plus proche de vous parmi celles citées ci-dessus.
      Elle se situe à <span id="js_km" class="color_primary"></span> de votre point de
      recherche : <span id="place-name" class="color_secondary italic"></span><br>
    </p>
    <br></br>
  <span>
    <svg xmlns=" http://www.w3.org/2000/svg" width="14.024" height="12.466"
         viewBox="0 0 14.024 12.466">
      <path id="Icon_awesome-map-marked-alt" data-name="Icon awesome-map-marked-alt"
            d="M7.012,0A3.068,3.068,0,0,0,3.944,3.068c0,1.37,2.005,3.866,2.773,4.773a.384.384,0,0,0,.589,0c.768-.906,2.773-3.4,2.773-4.773A3.068,3.068,0,0,0,7.012,0Zm0,4.09A1.023,1.023,0,1,1,8.035,3.068,1.022,1.022,0,0,1,7.012,4.09ZM.49,5.258A.779.779,0,0,0,0,5.981v6.095a.39.39,0,0,0,.534.362L3.9,10.908V5.233A7.373,7.373,0,0,1,3.378,4.1Zm6.522,3.5a1.163,1.163,0,0,1-.889-.413c-.479-.565-.988-1.208-1.448-1.868v4.431L9.35,12.466V6.477c-.461.66-.97,1.3-1.448,1.868A1.164,1.164,0,0,1,7.012,8.757ZM13.49,3.924l-3.361,1.53v7.012L13.535,11.1a.779.779,0,0,0,.49-.723V4.286A.39.39,0,0,0,13.49,3.924Z"
            fill="#033c82" />
    </svg>
  </span>
  <a id="js_gmaplink" target="_blank">
    <span class="color_primary">
      Voir sur Google
    </span>
  </a>
</div>
</div>
</main>
</body>

/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$noiropaque:  rgba(29,31,32,.9);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris2:       rgba(255,255,255,.8);
$gris3:       rgba(204,204,204,1);
$padding:     20px 10px;

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0px auto;
  width: 640px;
  background: $noir;
  color: $blanc;
  font-size: 1em;
  padding: $padding;
}

main {
  padding: $padding;
  background: $noirfonce;
}

a {
  color: $bleu;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

a:hover,a:active {
  color: $blanc
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
  color: $bleu;
}

h2 {
  margin-top: 15px;
  width: 100%;
  color: $rose;
}

h3 {
  display: inline-block;
  margin: 10px 0px;
  color: $gris2;
  text-transform: uppercase;
}

h1,h2,h3 {
  font-family: 'Inconsolata', monospace;
}

hr {
  margin-top: 20px;
  border: 0px solid $bleu;
  border-bottom-width: 1px;
}

p {
  opacity: .85;
  color: $gris2;
  line-height: 1.6em;
}

ul {
  margin: 0;
  padding: 0;
  color: $gris3;
  list-style: none;
}

img {
  margin-top: 20px;
  width: 100%;
  height: auto;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/*www.lintermediaire.be*/

View Compiled

function initMap() {
  const input = document.getElementById("zip")
  const adresses = Array.from(document.querySelectorAll('li[data-adresse]')).map(function(el) {
    return el.getAttribute('data-adresse')
  })
  
  const autocomplete = new google.maps.places.Autocomplete(input, {fields: ["place_id", "geometry", "name", "formatted_address"]})
  const geocoder = new google.maps.Geocoder()
  const service = new google.maps.DistanceMatrixService()
  
  function runDistanceCalcul(response, status) {
    if(status == "OK") {
      var origins = response.originAddresses,
      destinations = response.destinationAddresses,
      calclDistance = []
      for (let i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements
        for (let j = 0; j < results.length; j++) {
          var element = results[j],
          distance = element.distance.value,
          km = element.distance.text
          calclDistance[distance] = {'name': destinations[j],'km': km}   
        }
      }
      calclDistance = calclDistance.sort()
      document.getElementById("js_name").textContent = calclDistance[0].name
      document.getElementById("js_km").textContent = calclDistance[0].km
      document.getElementById("js_gmaplink").href = "https://www.google.com/maps/place/" + calclDistance[0].name.replace(/ /g, "+")
      document.getElementById("js_mapResult").style.display = 'block'
      input.value = ""
    }
  }
  
  autocomplete.setComponentRestrictions({
    country: ["be"],
  })
  
  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace()
    
    if (!place.place_id) {
      return
    }
    
    geocoder
    .geocode({ placeId: place.place_id })
    .then(({ results }) => {
      document.getElementById("place-name").textContent = place.formatted_address //place.name
      
      service.getDistanceMatrix({
        origins: [results[0].geometry.location],
        destinations: adresses,
        travelMode: 'DRIVING',
      }, runDistanceCalcul )     
    })
    .catch((e) => window.alert("Désolé une erreur est survenue : " + e))
  })
}

window.initMap = initMap

This Pen is owned by Merlin on CodePen.

See more by @lintermediaire on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript