google maps Autocomplete with building not working for routing

Question

Here is a small application i'm writing to check a taxi fare in my country. everything is working well, including autocomplete. but if i type a building/mall name, the route is not showing. but if i type a road name, then the route is showing.

road name example in my city is : "jalan salemba raya" and "jalan medan merdeka timur"

mall name example : "Amaris Hotel Mangga Dua Square"

where is the problem ?

<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <title>Distance Calculator</title>
        <script type="text/javascript" src="http://maps.google.co.id/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

        <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var city = new google.maps.LatLng(-6.17503,106.826935);
            var myOptions = {
                zoom:17,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                center: city
            }

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            directionsDisplay.setMap(map);

            var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start'));

            var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end'));


        }

        function calcRoute() {
            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;
            var distanceDisplay = document.getElementById("distance");
            var timeDisplay = document.getElementById("time");
            var tarifDisplay = document.getElementById("tarif");


            var request = {
                origin:start, 
                destination:end,
                avoidTolls:true,
                provideRouteAlternatives:true,
                region:'co.id',
                avoidHighways:true,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);

                    jarak = Math.round((response.routes[0].legs[0].distance.value / 1000) * 100) /100;

                    distanceDisplay.value =  jarak + ' km';
                    timeDisplay.value = Math.round((response.routes[0].legs[0].duration.value+1020) /60, 2) + ' menit';
                    tarifDisplay.value = 'Rp '+ Math.floor( (jarak*3240) + 3500) + ',-';
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body onload="initialize()">
        <div>
            <p>
                <label for="start">Start: </label>
                <input type="text" name="start" id="start" placeholder="masukkan alamat"/>

                <label for="end">End: </label>
                <input type="text" name="end" id="end" placeholder="masukkan alamat"/>

                <input type="submit" value="Calculate Route" onclick="calcRoute()" />
            </p>
            <p>
                <label for="distance">Jarak: </label>
                <input type="text" name="distance" id="distance" readonly />
            </p>
            <p>
                <label for="time">Estimasi waktu: </label>
                <input type="text" name="time" id="time" readonly />
            </p>
            <p>
                <label for="tarif">Tarif: </label>
                <input type="text" name="tarif" id="tarif" readonly />
            </p>
        </div>
        <div id="map_canvas" style="height:100%;width:100%"></div>
    </body>
</html>

Answer 1

Since all you need is the distance and the route, you should use the coordinates provided by the autocomplete service. See the documentation for how to access the coordinates that result when the user selects a suggestion:

var startCoord, endCoord;
google.maps.event.addListener(autocomplete1, 'place_changed', function() {
  var place = autocomplete1.getPlace();
  if (!place.geometry) {
    // Inform the user that a place was not found and return.
    return;
  }
  // place coordinate 
  startCoord = place.geometry.location
});
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
  var place = autocomplete2.getPlace();
  if (!place.geometry) {
    // Inform the user that a place was not found and return.
    return;
  }
  // place coordinate 
  endCoord = place.geometry.location
});

Then use startCoord and endCoord in your directions request.

proof of concept fiddle

code snippet:

 var directionDisplay; var directionsService = new google.maps.DirectionsService(); var map; var startCoord, endCoord; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var city = new google.maps.LatLng(-6.17503, 106.826935); var myOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.HYBRID, center: city } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start')); var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end')); google.maps.event.addListener(autocomplete1, 'place_changed', function() { var place = autocomplete1.getPlace(); if (!place.geometry) { // Inform the user that a place was not found and return. return; } // place coordinate startCoord = place.geometry.location }); google.maps.event.addListener(autocomplete2, 'place_changed', function() { var place = autocomplete2.getPlace(); if (!place.geometry) { // Inform the user that a place was not found and return. return; } // place coordinate endCoord = place.geometry.location }); } function calcRoute() { var start, end; if (!startCoord) { start = document.getElementById("start").value; } else { start = startCoord; } if (!endCoord) { end = document.getElementById("end").value; } else { end = endCoord; } var distanceDisplay = document.getElementById("distance"); var timeDisplay = document.getElementById("time"); var tarifDisplay = document.getElementById("tarif"); var request = { origin: start, destination: end, avoidTolls: true, provideRouteAlternatives: true, region: 'co.id', avoidHighways: true, optimizeWaypoints: true, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); jarak = Math.round((response.routes[0].legs[0].distance.value / 1000) * 100) / 100; distanceDisplay.value = jarak + ' km'; timeDisplay.value = Math.round((response.routes[0].legs[0].duration.value + 1020) / 60, 2) + ' menit'; tarifDisplay.value = 'Rp ' + Math.floor((jarak * 3240) + 3500) + ',-'; } else { alert("directions request failed, status=" + status); } }); } google.maps.event.addDomListener(window, 'load', initialize);

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div> <p> <label for="start">Start:</label> <input type="text" name="start" id="start" placeholder="masukkan alamat" value='Museum Taman Prasasti, South Petojo, Special Capital Region of Jakarta, Indonesia' /> <label for="end">End:</label> <input type="text" name="end" id="end" placeholder="masukkan alamat" value='Mangga Dua Square' /> <input type="submit" value="Calculate Route" onclick="calcRoute()" /> </p> <p> <label for="distance">Jarak:</label> <input type="text" name="distance" id="distance" readonly /> </p> <p> <label for="time">Estimasi waktu:</label> <input type="text" name="time" id="time" readonly /> </p> <p> <label for="tarif">Tarif:</label> <input type="text" name="tarif" id="tarif" readonly /> </p> </div> <div id="map_canvas"></div>

google maps Autocomplete with building not working for routing

Question

1 answers

solution1
0 2013-09-24 18:42:00

google maps Autocomplete with building not working for routing

Question

1 answers

solution1 0 2013-09-24 18:42:00

solution1
0 2013-09-24 18:42:00