Export (Convert) Google Maps with PolyLines to Image using jQuery and JavaScript

Last Reply 26 days ago By dharmendr

Posted 29 days ago

I want to record the google map with jpg or png, with the marker and the polylines drawn, I use the example:

Export (Convert) Google Maps to Image using Google Maps API V3 Static Maps API

But I don't know how to record the polylines that I represent, my drawing code:

<script type="text/javascript">
    var markers = [
                    {
                        "title": 'CL 3105',
                        "lat": '-46.6913472',
                        "lng": '-67.8249861111111',
                        "description": 'Pozo inyector'
                    },
                    {
                        "title": 'CL 3046',
                        "lat": '-46.6921',
                        "lng": '-67.82013888888889',
                        "description": 'Productor 1'
                    },
                    {
                        "title": 'CL 3072',
                        "lat": '-46.6935278',
                        "lng": '-67.81691388888889',
                        "description": 'Productor 2'
                    },
                    {
                        "title": 'CL 3071',
                        "lat": '-46.6896222222222',
                        "lng": '-67.81862777777778',
                        "description": 'Productor 3'
                    },
                    {
                        "title": 'CL 3073',
                        "lat": '-46.68713888888889',
                        "lng": '-67.82014166666666',
                        "description": 'Productor 4'
                    },
                    {
                        "title": 'CL 3079',
                        "lat": '-46.686638888888889',
                        "lng": '-67.816625',
                        "description": 'Productor 5'
                    },
                    {
                        "title": 'CL 3077',
                        "lat": '-46.6866',
                        "lng": '-67.80874444444444',
                        "description": 'Productor 6'
                    }

                    ];
    window.onload = function () {
        LoadMap();
    }
    var map, mapOptions;
    function LoadMap() {
        mapOptions = {
            center: new google.maps.LatLng(-46.6896222222222, -67.81862777777778),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (var i = 0; i < 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 < markers.length; i++) {
            var data = markers[i];
            var data_inicio = markers[1];
            var colores = ["red", "blue", "green", "yelow", "orange", "olive", "violet", "cyan", "coral", "darkblue"];
            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() {
        var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";
        staticMapUrl += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng();
        staticMapUrl += "&size=220x350";
        staticMapUrl += "&zoom=" + mapOptions.zoom;
        staticMapUrl += "&maptype=" + mapOptions.mapTypeId;
        for (var i = 0; i < markers.length; i++) {
            staticMapUrl += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;
        }
        var imgMap = document.getElementById("imgMap");
        imgMap.src = staticMapUrl;
        imgMap.style.display = "block";
    }
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="dvMap" style="width: 220px; height: 350px">
            </div>
        </td>
        <td>
            &nbsp; &nbsp;
        </td>
        <td>
            <img id="imgMap" alt="" style="display: none" />
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnExport" value="Export" onclick="Export()" />

 

Posted 26 days ago

Hi Eduardo,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key"></script>
<script type="text/javascript">
    var markers = [{
        "title": 'CL 3105',
        "lat": '-46.6913472',
        "lng": '-67.8249861111111',
        "description": 'Pozo inyector'
    }, {
        "title": 'CL 3046',
        "lat": '-46.6921',
        "lng": '-67.82013888888889',
        "description": 'Productor 1'
    }, {
        "title": 'CL 3072',
        "lat": '-46.6935278',
        "lng": '-67.81691388888889',
        "description": 'Productor 2'
    }, {
        "title": 'CL 3071',
        "lat": '-46.6896222222222',
        "lng": '-67.81862777777778',
        "description": 'Productor 3'
    }, {
        "title": 'CL 3073',
        "lat": '-46.68713888888889',
        "lng": '-67.82014166666666',
        "description": 'Productor 4'
    }, {
        "title": 'CL 3079',
        "lat": '-46.686638888888889',
        "lng": '-67.816625',
        "description": 'Productor 5'
    }, {
        "title": 'CL 3077',
        "lat": '-46.6866',
        "lng": '-67.80874444444444',
        "description": 'Productor 6'
    }];
    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("dvMap"), mapOptions);


        for (var i = 0; i < 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 < markers.length; i++) {
            var data = markers[i];
            var data_inicio = markers[1];
            var colores = ["red", "blue", "green", "yelow", "orange", "olive", "violet", "cyan", "coral", "darkblue"];
            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($("#dvMap"), {
            useCORS: true,
            onrendered: function (canvas) {
                $("#imgMap").attr("src", canvas.toDataURL("image/png"));
                $("#imgMap").show();
            }
        });
    }
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="dvMap" style="width: 220px; height: 350px">
            </div>
        </td>
        <td>
            &nbsp; &nbsp;
        </td>
        <td>
            <img id="imgMap" src="" alt="" style="display: none" />
        </td>
    </tr>
</table>
<br />
<input type="button" id="btnExport" value="Export" onclick="Export()" />

Screenshot

https://i.imgur.com/b2VG2Qn.gif