SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Threaded View

  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


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
  •