SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Force user to select address from google maps api autocomplete

    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

    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!
    Last edited by Pullo; Sep 17, 2013 at 22:39. Reason: Added code tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The link you provided returns a 404

  3. #3
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, its just live in the homepage now. http://www.driveu.com

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Change your JS to this:

    Code JavaScript:
    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. #7
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •