javascript - drawing multiple lines in google-map -
i've drawn single polyline in google-map, when tried draw 2 line in single map failed...its not showing on google-map
can please tell me solution this
see - http://jsfiddle.net/wlebh/12/
my javascript given below
function initmap() { alert("entered!!!"); var routes = [{origin:'p t usha road, kozhikode', destination:'cooperative hospital, eranjipalam, kozhikode' }, {origin:'iim, kozhikode', destination:'vellimadukunnu, kozhikode' } ]; try{ var rendereroptions = { preserveviewport: true, suppressmarkers:true, routeindex:1 }; var directionsservice = new google.maps.directionsservice(); var directionsdisplay = new google.maps.directionsrenderer(); //routes.each(function(route){ (var = 0, l = routes.length; < l; i++) { var obj = routes[i]; alert(obj.origin); var request = { origin: obj.origin, destination: obj.destination, travelmode: google.maps.travelmode.driving }; map = new google.maps.map(document.getelementbyid("map"), { center: new google.maps.latlng(0,0), zoom: 10, maxzoom:16, maptypeid: google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu }, navigationcontrol: true, navigationcontroloptions: { style: google.maps.navigationcontrolstyle.small } }); var directionsdisplay = new google.maps.directionsrenderer(rendereroptions); directionsdisplay.setmap(map); directionsservice.route(request, function(result, status) { console.log(result); if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(result); } }); } }catch(e){alert(e);} }
there issues not related question:
- you create new map-instance on each iteration
- you didn't set map-property of renderer
- you've set routeindex 1, 1 route(with index 0)
the issue related question: attempt good, implementation wasn't.
must create new directionsrenderer-instance each request(you've done it), instance visible in function-scope, variable overwritten on each iteration , when response arrives each response use same directionsrenderer-instance(which may render single route).
use anonymous function create directionsrenderer-instances , requests:
$.each(routes, function(i,obj){//<--anonymous function var request = { origin: obj.origin, destination: obj.destination, travelmode: google.maps.travelmode.driving }, //directionsdisplay visible in scope of anonymous function directionsdisplay = new google.maps.directionsrenderer(rendereroptions); directionsservice.route(request, function(result, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(result); } }); });});
Comments
Post a Comment