roshan thapa roshan thapa - 10 months ago 78
Javascript Question

google distance calculator and auto complete

I am trying to do some work with google maps and auto-complete . I have taken the google distance script and trying to integrate the autocomplete of google with it. The distance calculation and Routes Direction are working fine. But i failed for the autocomplete in start and end input field . If i manually type the location in both end and start field, it works, but no auto complete of google works.

<style type="text/css">
html {
height: 100%
body {
height: 100%;
margin: 0px;
padding: 0px
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var map = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
map = new google.maps.Map(document.getElementById('map_canvas'),

var control = document.getElementById('control'); = 'block';

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) {
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
total = total / 1000.
document.getElementById("total").innerHTML = total + " km";

function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
types: [],
componentRestrictions: {country: ["AUS"]}
var autocomplete = new google.maps.places.Autocomplete(input, options);

google.maps.event.addDomListener(window, 'load', initialize);
<body onLoad="initialize()">
<div id="total"></div>
<div id="control"> <strong>Start:</strong>
<input type="text" id="start"><input type="text" id="end"><input type="button" value="GO" onClick="calcRoute();">
<table border="1" style="height:100%; width:100%;">
<td style="width: 70%; height: 100%;"><div id="map_canvas" style="width:100%;height:100%;"></div></td>
<td style="width: 30%; height: 100%;"><div id="directions-panel" style="width:100%;height: 100%;"></div></td>

Answer Source


     <script type="text/javascript"


<script type="text/javascript" src=""></script>


map = new google.maps.Map(document.getElementById('map_canvas'),


    //Find From location    
    var fromText = document.getElementById('start');
    var fromAuto = new google.maps.places.Autocomplete(fromText);
    fromAuto.bindTo('bounds', map);
    //Find To location
    var toText = document.getElementById('end');
    var toAuto = new google.maps.places.Autocomplete(toText);
    toAuto.bindTo('bounds', map);