javascript - google map way points not removing using direction services -
new plunker demo:http://plnkr.co/edit/6tmeshnvn0onjjwbwzjx
//source , destination auto complete textbox binding google.maps.event.adddomlistener(window, 'load', function () { var places = new google.maps.places.autocomplete(document.getelementbyid('source')); google.maps.event.addlistener(places, 'place_changed', function () { var place = places.getplace(); sourcelat = place.geometry.location.lat(); sourcelng = place.geometry.location.lng(); }); var places1 = new google.maps.places.autocomplete(document.getelementbyid('destination')); google.maps.event.addlistener(places1, 'place_changed', function () { var place1 = places1.getplace(); }); }); var cnt = 1; var v = [];var autocomplete = []; var map = null;var usedids = []; var insertcontrols = []; var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; var sourcelat, sourcelng; var maxnumberoftextboxallowed = 5; var autocompleteoptions = { componentrestrictions: { country: "in" } }; function initialize() { directionsdisplay = new google.maps.directionsrenderer(); var mapcenter = new google.maps.latlng(sourcelat, sourcelng); //to center google map location on source points. var mapoptions = { zoom: 10, center: mapcenter } map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); directionsdisplay.setmap(map); } google.maps.event.adddomlistener(window, 'load', initialize); //my method dynamically generate textbox function generatesourcedestinationpoint() { if (cnt <= maxnumberoftextboxallowed) { var id = findavailableid(); var orderingfield = $("<div class='orderingfield' id='orderingfield" + id + "'/>"); var leftfloat = $("<div class='leftfloat' id='leftfloat" + id + "'/>"); var rightfloatcommands = $("<div class='rightfloat commands' id='rightfloat commands" + id + "'/>"); var upbutton = $("<button id='navigate' value='up'>up</button>"); var downbutton = $("<button id='navigate' value='down'>down</button>"); var fname = $("<input type='text' class='fieldname' id='txtopt" + id + "' name='txtoptnm" + id + "'/>"); var removebutton = $("<img class='remove' src='../remove.png' />"); leftfloat.append(fname); leftfloat.append(removebutton); rightfloatcommands.append(upbutton); rightfloatcommands.append(downbutton); orderingfield.append(leftfloat); orderingfield.append(rightfloatcommands); $("#fieldcontainer").append(orderingfield); var newinput = []; var newel = document.getelementbyid('txtopt' + id); var txtboxid = 'txtopt' + id; newinput.push(newel); setupautocomplete(autocomplete, newinput, 0, txtboxid); cnt = cnt + 1; } else alert("cant create more 5 points") } //auto complete function bind dynamic textbox function setupautocomplete(autocomplete, inputs, i,txtboxid) { insertcontrols.push(txtboxid) autocomplete.push(new google.maps.places.autocomplete(inputs[i], autocompleteoptions)); var idx = autocomplete.length - 1; google.maps.event.addlistener(autocomplete[idx], 'place_changed', function () { if (marker[idx] && marker[idx].setmap) { marker[idx].setmap(null); marker[idx] = null; } marker[idx] = new google.maps.marker({ map: map, icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + '|ff776b|000000' }); marker[idx].setvisible(false); var place = autocomplete[idx].getplace(); if (!place.geometry) { return; } marker[idx].setposition(place.geometry.location); marker[idx].setvisible(true); var auto = document.getelementbyid(insertcontrols[idx]).value; v.push(auto); calcroute(); }); } //when generating new textbox use function find removed textbox id.for eg if have remove textbox 3 assign txtopt3 newly generated textbox. function findavailableid() { var = 1; while (usedids[i]) i++; usedids[i] = true; return i; }; function removeid(idtoremove) { usedids[idtoremove] = false; }; //method remove textbox dom $(document).on('click', "img.remove", function () { $(this).parent().parent().fadeout(1000, function () { if (cnt > maxnumberoftextboxallowed) cnt = cnt - 2; else if (cnt == 1) cnt = 1; else cnt = cnt - 1; var id = $(this).attr("id").substr(13); deletemarkers(id) removeid(id); $(this).remove(); }); }); //this function call when remove route point dynamic textbox , here remove point v array , again re-draw map source , destination. function deletemarkers(id) { var removemarker = id - 1; (var = 0; < v.length; i++) { if (i == removemarker) { v.splice(i, 1); } } calcroute(); } //function draw route source destination connecting way points function calcroute() { var start = document.getelementbyid('source').value; var end = document.getelementbyid('destination').value; var waypts = []; var request = null; if (v.length != 0) { (var = 0; < v.length; i++) { waypts.push({ location: v[i], stopover: true }); } request = { origin: start, destination: end, optimizewaypoints: true, waypoints: waypts, travelmode: google.maps.travelmode.driving }; } else { request = { origin: start, destination: end, travelmode: google.maps.travelmode.driving }; } directionsservice.route(request, function (response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); var route = response.routes[0]; } }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,geometry"></script> <input id="maptype" type="hidden" value="roadmap" /> <input type="button" onclick="calcroute()" value="view on google map" /> <br /><br /> <label>source</label> <input type="text" value="" name="source" id="source"> <br /><br /> <label>destination</label> <input type="text" value="" name="destination" id="destination"> <br /><br /> <button onclick="generatesourcedestinationpoint()" class="btn btn-primary" type="button" >add points</button> <div style="border: 1px solid -moz-nativehyperlinktext;"></div> <div id="fieldcontainer"> </div> <br /><br /> <div style="height:400px;width:1000px"> <div id="map_canvas"></div> </div>i using google map define source , destination.
now between source , destination user can add 5 points in between source , destination.
for eg:
- source los angeles
- destination chicago
between source , destination user can add 5 points(city only) falls in between los angeles chicago.
i having 2 textbox :
- source(google auto complete feature)
- destination(google auto complete feature)
for adding route points dynamically generating 5 textbox textbox having google auto complete feature.(this feature may extended process dynamic):
when user enter source , destination , click on button view on google map button show path between source , destination.
note:after entering source , destination have click on button view on google map in plunker link.
now after user define 5 route points dynamically generated textboxes , show route points on path of source , destination.
so far able show route points on source , destination path problem when removing route points not able delete point source , destination path.
it still exist on source , destination path marker.
now when delete route point marker not removing way points though path updated correctly.
see below screenshot: 
according the documentation on waypoints,
the maximum allowed waypoints 8, plus origin, , destination. google maps api work customers allowed 23 waypoints, plus origin, , destination. waypoints not supported transit directions.
which might explain why program starts misbehave when had processed many waypoints; app not deleting old waypoints correctly ran out of quota , misbehave.
in short, issue facing should caused incorrect logic use manage waypoints, , fixing waypoints logic should fix problem. hope helps.
Comments
Post a Comment