Fixing Encoded String For Google Maps Polyline

I have an encoded string I want to use to draw a line in google maps, but Javascript can't read the string because of special characters such as the backslash. Unfortunately I don'

Solution 1:

I see no issue with that encoded Polyline. There is no need to escape anything. Just enclose the string within simple ' or double " quotes and it will work.

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {
            lat: 55.570,
            lng: 9.000
        },
        zoom: 10
    });

    var encoded_data = 'qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO';

    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#00008B',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

initialize();

Proof of concept fiddle:

JSFiddle demo

Solution 2:

Indeed, in your example encoded_data variable contains some special characters (e.g. \) that need to be escaped.

You could utilize JavaScript String encoding - Online tool for that purpose, in that case the string:

qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO

will be encoded to:

qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO

Modified example

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 55.570, lng: 9.000 },
        zoom: 11
    });

    var encoded_data = "qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO";
    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#00008B',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

html, body {
     height: 100%;
     margin: 0;
     padding: 0;
}
#map {
    height: 100%;
}

<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
</script>

Another example

        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 55.570, lng: 9.000 },
                zoom: 13
            });

            var encoded_data = document.getElementById('encodedPolyline').value;
            
            var decode = google.maps.geometry.encoding.decodePath(encoded_data);

            var line = new google.maps.Polyline({
                path: decode,
                strokeColor: '#00008B',
                strokeOpacity: 1.0,
                strokeWeight: 4,
                zIndex: 3
            });

            line.setMap(map);
        }

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 }

 #map {
    height: 100%;
 }

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<table>
            <tr>
                <td>Encoded Polyline:</td>
                <td><textarea id="encodedPolyline" class="encodeBox"></textarea></td>
            </tr>
            <tr>
                <td>
                    <p>
                        <input type="button" value="Draw Polyline" onclick="initMap()" />
                    </p>
                </td>
            </tr>
</table>
<div id="map"></div>