javascript - google maps Autocomplete with building not working for routing -

-

here small application i'm writing check taxi fare in country. working well, including autocomplete. if type building/mall name, route not showing. if type road name, route showing.

road name example in city : "jalan salemba raya" , "jalan medan merdeka timur"

mall name example : "amaris hotel mangga dua square"

where 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>

since need distance , route, should use coordinates provided autocomplete service. see documentation how access coordinates result when user selects suggestion:

var startcoord, endcoord; google.maps.event.addlistener(autocomplete1, 'place_changed', function() {   var place = autocomplete1.getplace();   if (!place.geometry) {     // inform user place not found , return.     return;   }   // place coordinate    startcoord = place.geometry.location }); google.maps.event.addlistener(autocomplete2, 'place_changed', function() {   var place = autocomplete2.getplace();   if (!place.geometry) {     // inform user place not found , return.     return;   }   // place coordinate    endcoord = place.geometry.location });

then use startcoord , endcoord in 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 user place not found , return.        return;      }      // place coordinate       startcoord = place.geometry.location    });    google.maps.event.addlistener(autocomplete2, 'place_changed', function() {      var place = autocomplete2.getplace();      if (!place.geometry) {        // inform user place not found , 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"></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>


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more