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.Export (Convert) Google Maps with PolyLines to Image using jQuery and JavaScript<p>Hi <a class="username" rel="Eduardo"> Eduardo</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maps.googleapis.com/maps/api/js?key=API_Key&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var markers = [{ &#34;title&#34;: &#39;CL 3105&#39;, &#34;lat&#34;: &#39;-46.6913472&#39;, &#34;lng&#34;: &#39;-67.8249861111111&#39;, &#34;description&#34;: &#39;Pozo inyector&#39; }, { &#34;title&#34;: &#39;CL 3046&#39;, &#34;lat&#34;: &#39;-46.6921&#39;, &#34;lng&#34;: &#39;-67.82013888888889&#39;, &#34;description&#34;: &#39;Productor 1&#39; }, { &#34;title&#34;: &#39;CL 3072&#39;, &#34;lat&#34;: &#39;-46.6935278&#39;, &#34;lng&#34;: &#39;-67.81691388888889&#39;, &#34;description&#34;: &#39;Productor 2&#39; }, { &#34;title&#34;: &#39;CL 3071&#39;, &#34;lat&#34;: &#39;-46.6896222222222&#39;, &#34;lng&#34;: &#39;-67.81862777777778&#39;, &#34;description&#34;: &#39;Productor 3&#39; }, { &#34;title&#34;: &#39;CL 3073&#39;, &#34;lat&#34;: &#39;-46.68713888888889&#39;, &#34;lng&#34;: &#39;-67.82014166666666&#39;, &#34;description&#34;: &#39;Productor 4&#39; }, { &#34;title&#34;: &#39;CL 3079&#39;, &#34;lat&#34;: &#39;-46.686638888888889&#39;, &#34;lng&#34;: &#39;-67.816625&#39;, &#34;description&#34;: &#39;Productor 5&#39; }, { &#34;title&#34;: &#39;CL 3077&#39;, &#34;lat&#34;: &#39;-46.6866&#39;, &#34;lng&#34;: &#39;-67.80874444444444&#39;, &#34;description&#34;: &#39;Productor 6&#39; }]; window.onload = function () { LoadMap(); } var map, mapOptions; function LoadMap() { mapOptions = { center: new google.maps.LatLng(-46.6896222222222, -67.81862777777778), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(&#34;dvMap&#34;), mapOptions); for (var i = 0; i &lt; markers.length; i++) { var data = markers[i]; var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); } for (var i = 0; i &lt; markers.length; i++) { var data = markers[i]; var data_inicio = markers[1]; var colores = [&#34;red&#34;, &#34;blue&#34;, &#34;green&#34;, &#34;yelow&#34;, &#34;orange&#34;, &#34;olive&#34;, &#34;violet&#34;, &#34;cyan&#34;, &#34;coral&#34;, &#34;darkblue&#34;]; var line = new google.maps.Polyline({ path: [ new google.maps.LatLng(data_inicio.lat, data_inicio.lng), new google.maps.LatLng(data.lat, data.lng) ], strokeColor: colores[i], strokeOpacity: 0.6, strokeWeight: 1 + i + i, geodesic: true, map: map }); } }; function Export() { html2canvas($(&#34;#dvMap&#34;), { useCORS: true, onrendered: function (canvas) { $(&#34;#imgMap&#34;).attr(&#34;src&#34;, canvas.toDataURL(&#34;image/png&#34;)); $(&#34;#imgMap&#34;).show(); } }); } &lt;/script&gt; &lt;table border=&#34;0&#34; cellpadding=&#34;0&#34; cellspacing=&#34;0&#34;&gt; &lt;tr&gt; &lt;td&gt; &lt;div id=&#34;dvMap&#34; style=&#34;width: 220px; height: 350px&#34;&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt; &amp;nbsp; &amp;nbsp; &lt;/td&gt; &lt;td&gt; &lt;img id=&#34;imgMap&#34; src=&#34;&#34; alt=&#34;&#34; style=&#34;display: none&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;input type=&#34;button&#34; id=&#34;btnExport&#34; value=&#34;Export&#34; onclick=&#34;Export()&#34; /&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/b2VG2Qn.gif" alt="https://i.imgur.com/b2VG2Qn.gif" /></p>https://www.aspforums.net:443/Threads/530709/Export-Convert-Google-Maps-with-PolyLines-to-Image-using-jQuery-and-JavaScript/https://www.aspforums.net:443/Threads/530709/Export-Convert-Google-Maps-with-PolyLines-to-Image-using-jQuery-and-JavaScript/Mon, 26 Aug 2019 03:46:15 GMT