Force user to select address from google maps api autocomplete

JavaScript
1

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!

2

Hi,

The link you provided returns a 404

3

Oops, its just live in the homepage now. http://www.driveu.com

4

Hi,

Just had a look at your page. You have a field to enter the address (which seems to work fine).
When I click into that field, I see two select menus appear, both of which are populated by sensible data.

What exactly is it then that you are trying to force the user to select?

5

when you click on the field to enter your address, a google maps api address autocomplete pops up in the bottom part with yellow background. I would like to force users to select an address from that autocomplete to make sure they arent entering an address that doesnt exist.

6

Hi there,

Change your JS to this:

function invalidInput(value){
  var unacceptableValues = [
    "enter your pickup address here ", 
    "San Diego, CA: ", 
    ""
  ];
  return $.inArray(value, unacceptableValues);
}

$(".gfc_online_booking_form").submit(function(e){
  var paddress = $("#start").val();
  if (invalidInput(paddress)){
    alert("edit your pickup address before continuing");
    e.preventDefault();
  }
});
   
$("#fare").click(function(e){
  var paddress = $("#start").val();
  if (invalidInput(paddress)){
    alert("edit your pickup address before continuing");
    e.preventDefault();
  } else {
    $(this).fadeTo('slow', 0.5);
    $('#pickup').animate({height:'380px'})
    $('#results').fadeTo('slow', 1);
  }
});
   
$('.dateselect').change(function() {
  var triptime = $("#timeselect").val(),
      tripdate = $("#dateselect option:selected").text(),
      tripdate2 = $("#dateselect").val();
  $(".requestacab").val("REQUEST CAB AT "+triptime);
  $("#futurepickup").html("*"+tripdate);
  $('input[name=datetime]').val(tripdate2+" "+triptime);
});

//change size of search div
$('#start').click(function(){
  $('#pickup').animate({ height:'80px' }, 200);
  $(this).animate({  background:'#eeeeee' }, 200);
  $('#results').fadeTo('fast', 0);
});

Hopefully this is self-explanatory, but if you have any questions, just let me know.

7

Hi pullo, sorry for the late reply, and i appreciate your help. but it looks like you worked with the wrong javascript. Im looking to modify the google maps part of the code.

When a user starts typing an address on the text input, an auto complete list of addresses shows up.

I want to force users to have to select something from that auto complete list… if they type in an invalid address that isnt showing up on the drop down menu, then i would like to stop the form from being submitted.

Is that possible?

8

Well, I suppose you could attach an event handler that is fired whenever the Google suggestions box is (re)populated.
This would save the set of suggestions presented by Google in a variable of some description.
Then, when the form is submitted, you could compare the value submitted with the previous set of suggestions and react accordingly.