Routing with AutoComplete

javascript

simplegmaps.init({
  container: '#simplegmaps-1',
  routeDescriptionContainer: '#simplegmaps-directions',
  MapOptions: {
    zoom: 14
  }
});

simplegmaps.Directions.initAutoComplete({
  originInput: '#simplegmaps-fromaddress',
  eventButton: '#simplegmaps-getroute'
});

document.querySelector('#simplegmaps-getroute').addEventListener('click', function(event) {
  simplegmaps.Directions.route({
    origin: document.querySelector('#simplegmaps-fromaddress').value,
    destination: simplegmaps.Markers.get()[0].getPosition(),
    travelMode: document.querySelector('#simplegmaps-travelmode').value
  });
  event.preventDefault();
});

var travelmodes = simplegmaps.Directions.TravelModes.get();
var select = document.getElementById("simplegmaps-travelmode");

for (var key in travelmodes) {
  if (travelmodes.hasOwnProperty(key)) {
    var el = document.createElement("option");
    el.textContent = key;
    el.value = travelmodes[key];
    select.appendChild(el);
  }
}

html

  

    

      

    
  


  

    

       From address
       
       
     
  
  

    

       Travel Mode
      
    
  
  

    

      Get route