Force user to select address from google maps api autocomplete

Question

Ive got this distance calculator using google maps api, and im trying to have two autocomplete forms for the start and ending address.... it works perfectly, except i want to force the user to select from the drop down, and not allow them to continue if they dont.

heres the code

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  //draw the map
     var rendererOptions = {
      map: map,
  preserveViewport: false,
      suppressMarkers : true
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

   directionsDisplay.setMap(map);


  var input = (document.getElementById('start'));
  var searchBox = new google.maps.places.SearchBox(input);
  var input2 = (document.getElementById('end'));
  var searchBox2 = new google.maps.places.SearchBox(input2);

  var markers = [];

  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
     }

    markers = [];
     var bounds = new google.maps.LatLngBounds();
     for (var i = 0, place; place = places[i]; i++) {
      var marker = new google.maps.Marker({
         map: map,
         icon: 'http://www.driveu.com/images/pmarker.png',
         title: place.name,
         position: place.geometry.location
      });

       markers.push(marker);
       bounds.extend(place.geometry.location);
     }

    map.fitBounds(bounds);
        map.setZoom(15);
  });

  google.maps.event.addListener(searchBox2, 'places_changed', function() {
    var places = searchBox2.getPlaces();

    for (var i = 0, marker2; marker2 = markers[i]; i++) {
      marker2.setMap(null);
    }

    markers = [];
   var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
     var marker2 = new google.maps.Marker({
        map: map,
        icon: 'http://www.driveu.com/images/markerlarge.png',
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker2);
      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
        map.setZoom(15);
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
     searchBox.setBounds(bounds);
  });
 }

function calcRoute() {
   var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
 directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);

    var calc_distance = response.routes[0].legs[0].distance.value; 
        var drivingDistanceMiles = calc_distance / 1609.344;
        var drivingDistanceMiles = Math.round(drivingDistanceMiles*100)/100;

        var drivingrate1 = Math.round((drivingDistanceMiles*3.00)+2.80);
        var drivingrate2 = Math.round(((drivingDistanceMiles*3.00)+2.80)*1.15);
        document.getElementById('results').innerHTML = '<div id="next_line" style="display:none"><div style=" margin-right:5%; width:45%; float:left;"><strong> distance:</strong><br/><div style="background:#333; padding:15px; font-size:22px; color:#bbb;">'+drivingDistanceMiles+' <span style="font-size:12px;"> miles </span></div></div><div style=" width:50%; float:left;"><strong> estimate:</strong><br/>   <div style="background:#333; padding:15px; font-size:22px; color:#bbb;">$'+drivingrate1+' <span style="font-size:12px;"> to </span> $'+drivingrate2+'</div></div></div>';
    }
 });
}
google.maps.event.addDomListener(window, 'load', initialize);

heres a demo http://driveu.com/index2.php

Thanks in advance!

Answer 1

1. First, get the value entered in the location input box
2. Get predictions with that value using AutocompleteService
3. Then check if location value matches the prediction, if the value doesn't match the predictions then it means the user has not selected the location from autocomplete dropdown

var displaySuggestions = function(predictions, status) {
    let valid_location = false;
    if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(Invalid location);
        return;
    }

    predictions.forEach(function(prediction) {

        if( $("#location").val().replace(/\s/g,'').toLowerCase() == prediction.description.replace(/\s/g,'').toLowerCase() ){
            valid_location = true;
        }

    });
    if(valid_location){
        alert(Valid location);
    }
    else{
        alert(Invalid location);
    }
  };
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: $("#location").val() }, displaySuggestions);

Answer 2

if you're using jQuery

$( document ).ready(function() {
  $( "form" ).submit(function( event ) {
    if $('form input.map_select_box').val() == ''
       event.preventDefault();
    end
  });
});

http://api.jquery.com/submit/