Home/ Questions/Q 6967591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:20:31+00:00

I’m decoding an encoded path and using this decoded path to draw a polyline

  • 0

I’m decoding an encoded path and using this decoded path to draw a polyline on google map. However for some reason, no line is seen to be drawn. Any idea what when wrong?

JS Code

encoded_path = 'axwaGtbcqL`BgArBmAjCcBlBcCnBeChB_BrAmAxByBjCoCkAqBmByCu@qA[i@~BmAdAq@FEzAqAvAsA|@{@DCr@{@DIjAuA|@cAz@}@~AeB\[LZxAjDJINM|AkAxAxCfAw@g@jAeBpEOr@Ox@CTeAlMM~AYhDc@pE_AtHGj@m@`Gm@dHa@hFaAbM_AfJ]jDAlA{Hhv@eAdFy@bCcBpEeBzDyArDu@`E_AnFs@|Fq@fGKtKaEqCgBmB_GmFcJaM}@nBg@BbA}CpAaEvAoEnGyOvDuPDSPYAIIMMMGOMMIIKKKQIMIKIKa@gAQ_@Q[CCY_@OSQYQQOOSMSOa@]g@g@UWSUYm@Uk@]qAKe@Ia@I_@Iy@Es@C_AAw@A]Ca@G[Qy@GSKa@M]M_@Qa@M]IOGKQSGIIG}@w@{AgAiAaAWSUOWOQIMEKCICOGMCKEQC_DuA?GbByB\_@~GaIxCgDl@s@bBkBnBcBzCqC`Ai@pCmA^mAd@qA';

decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);

console.log(decoded_path);

var polyOptions = {
            strokeColor: "#970E04" , 
            strokeOpacity: 1.0 , 
            strokeWeight: 2 , 
            path: decoded_path , 
            clickable: false,
            map: map
    }
polyline = new google.maps.Polyline(polyOptions);

Additional Info

The following code will set the initial map view to where the polyline should be drawn: North Cambridge, MA. Map is initialized in <body onload="initialize();"> so the map should be initialized before the polyline is drawn. NOT TRUE!! See below

function initialize() {
    var center_latlng = new google.maps.LatLng(42.39902115,-71.12902832);
    var options = {
        zoom: 13,
        minZoom: 11,
        maxZoom: 19,
        center: center_latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), options);
}

Additional Info #2

I created a button that creates the polyline on click. This way I can be sure that the polyline is created after the map has been initialized. Clicking this button cause the polyline to appear!!! How can I make the polyline load after the map is initialized?

$(function() {

    $("#button").click(function() {
        polyline.setPath(decoded_path);
        polyline.setMap(map);
    });

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try use google.maps.event.addDomListener, for example,

    <html>
<head>
    ...
    <script type="text/javascript">
        /**
            * Called on the intiial page load.
        */
        function init() {
            var map = new google.maps.Map(document.getElementById('map'), {
                ...
            });
            ...
            var line = new google.maps.Polyline({
                ...
                map: map
            });
        }
        // Register an event listener to fire once when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);
    </script>
</head>
<body>
    <div id="map"></div>
</body>

    • 0