A Pen by Rima

Thumbnail
This awesome code was written by rimaghawa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rimaghawa ©

Technologies

  • HTML
  • CSS
  • JavaScript
    
  <body>
    <h1>Find Directions </h1>   
      From:<input type="text" id="From" Directio required="required" value="" />
    <button onclick=" getPosition()">Get my position</button>
      <br/>
     <br/> To:
      <input type="text" id="To"  required="required" placeholder="" />
      <br />
<button onclick="findDirection()">Search</button>
    
    
    <div id="map"></div>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANk74FW4o-MVlR14SMDIyo_TvDfQy4dzQ" >
    </script>
  </body>
</html>


/*Downloaded from https://www.codeseek.co/rimaghawa/a-pen-by-rima-RWXmPg */
          #map {
        width: 100%;
        height: 100%;
      }


/*Downloaded from https://www.codeseek.co/rimaghawa/a-pen-by-rima-RWXmPg */
    function findDirection() {
  
  var directionsService= new google.maps.DirectionsService;//handle request
  var directionsRenderer= new google.maps.DirectionsRenderer;//handle response
  
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 2.978076, lng: 101.731065},
     mapTypeId: google.maps.MapTypeId.ROADMAP
  });

 directionsRenderer.setMap(map);
  
 var from= document.getElementById('From').value;
  var to =document.getElementById('To').value;
  
  
 function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService.route({
    origin: from,
    destination: to,
    travelMode: google.maps.TravelMode.DRIVING,
     unitSystem: google.maps.UnitSystem.METRIC,
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

}

Comments