ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Google Maps V3: Re-Draw Google Map Route with updated Latitide and Longitude <p>Hi <a class="username" rel="Shalaman">Shalaman</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p>Here i am just showing an example. The map will be populate with some initial data based on the global JavaScript Array on load. Then on button click i have changed the JavaScript Array with updated value and redraw the map based on the updated value.</p> <p>You need to modified your code based on your datareturned by nodejs as per your requirement.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34;&gt; // Initialize map data. var mydata = []; mydata = [{ &#34;title&#34;: &#39;Alibaug&#39;, &#34;lat&#34;: &#39;18.641400&#39;, &#34;lng&#34;: &#39;72.872200&#39; }, { &#34;title&#34;: &#39;Mumbai&#39;, &#34;lat&#34;: &#39;18.964700&#39;, &#34;lng&#34;: &#39;72.825800&#39; }, { &#34;title&#34;: &#39;Pune&#39;, &#34;lat&#34;: &#39;18.523600&#39;, &#34;lng&#34;: &#39;73.847800&#39;}]; //var mydata = JSON.parse(data); window.onload = function () { DrawRoute(); } $(document).ready(function () { $(&#34;#btnSend&#34;).click(function () { // Reassign map data with updated value. mydata = [{ &#34;title&#34;: &#34;x&#34;, &#34;lat&#34;: &#34;41.01766&#34;, &#34;lng&#34;: &#34;28.97438&#34; }, { &#34;title&#34;: &#34;y&#34;, &#34;lat&#34;: &#34;41.05877&#34;, &#34;lng&#34;: &#34;28.92305&#34;}]; // ReDraw Map. DrawRoute(); }); }); function DrawRoute() { var markers = mydata.map(function (location) { return { title: location.title, lat: location.lat, lng: location.lng }; }); var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(&#34;dvMap&#34;), mapOptions); var infoWindow = new google.maps.InfoWindow(); var lat_lng = new Array(); var latlngbounds = new google.maps.LatLngBounds(); for (i = 0; i &lt; markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); latlngbounds.extend(marker.position); (function (marker, data) { google.maps.event.addListener(marker, &#34;click&#34;, function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //***********ROUTING****************// //Intialize the Path Array var path = new google.maps.MVCArray(); //Intialize the Direction Service var service = new google.maps.DirectionsService(); //Set the Path Stroke Color var poly = new google.maps.Polyline({ map: map, strokeColor: &#39;#FD0000&#39; }); //Loop and Draw Path Route between the Points on MAP for (var i = 0; i &lt; lat_lng.length; i++) { if ((i + 1) &lt; lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; path.push(src); poly.setPath(path); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { for (var i = 0, len = result.routes[0].overview_path.length; i &lt; len; i++) { path.push(result.routes[0].overview_path[i]); } } }); } } } &lt;/script&gt; &lt;div id=&#34;Div1&#34; style=&#34;width: 300px; height: 300px&#34;&gt; &lt;/div&gt; &lt;input type=&#34;button&#34; id=&#34;Button1&#34; value=&#34;Redraw&#34; /&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/BLn2rFr.gif" alt="" width="323" height="385" /></p>https://www.aspforums.net:443/Threads/588366/Google-Maps-V3-Re-Draw-Google-Map-Route-with-updated-Latitide-and-Longitude/https://www.aspforums.net:443/Threads/588366/Google-Maps-V3-Re-Draw-Google-Map-Route-with-updated-Latitide-and-Longitude/Mon, 12 Mar 2018 04:43:44 GMT