Google maps encoded string displaying incorrectly

Question

Rewriting question to make it useful for others: After using google maps api encodePoly to encode a polyline I uploaded to my database. When I download, decoded and displayed it was displaying incorrectly.

Picture attached

What I learned is that I needed to replace the \\ with \\ immediately after encoding the path and prior to sending to POSTing to the database.

If you download, decode and then replace it is too late. Which now makes sense.

          function transferRteData(runPath,map) {
                var encodedPath = google.maps.geometry.encoding.encodePath(runPath.getPath());
                encodedPath=encodedPath.replace(/\\/g, "\\\\");
                var data =  {'encodedPath':encodedPath,};

                $.getJSON("{% url 'getfitmappedrte-view' %}", data, function(response){
                    if(response === 'success'){ alert('Yay!'); }
                    else{ alert('Error! :('); }
                });

          } //Close Transfer Data

Answer 1

Related questions:

• Google directions api overview polyline not working
• Fixing encoded string for Google Maps polyline
• Google Maps Encode Polyline Rendering Wrong

The \\ characters in the encoded polyline need to be escaped (with another \\ , making them \\\\ )

var trythis="mnniGr~|cNHl@Fl@BL??ABABAB?@?B?@@BHp@F`@Ht@L`A@?XW@A@A@?@??@?@@D@RJENEXKlA_@xBs@bA]LCRIXIJCNCrDo@REx@QXE|@QRE??b@hDTfBR|ArAfKVxBLh@bA|HDb@N`Ab@hDF`@Hp@BLHr@Jv@x@bGZ~B\pCd@pD\fC^rCVfBFb@F`@x@fGR|Af@nDPvAF`@LbA^rCHn@Lz@n@tEr@nFp@zENdA^xCZ`CLx@PvAT~AHl@PxAHn@ZrB^tCDPXtBFl@RzABRF`@ZbCJr@Hl@Jn@XnBN|@Hd@BJBHDJDJDLHNDDBFBBBBB@zBhCJNNRNZHVJVHXPlAFh@DXFj@BL@L@J@L@J@N?L@N?J@P?Z?d@EtAA\C`BATAT?RALARAJAHALAHCLEXCFAJCHERERGVo@lCu@|Cg@zBWfA[rA[rAg@rBSz@UhASx@M|@O`AIz@Gv@Ex@Cd@GnBCx@@h@@rA?b@Bn@B^f@rDfAtINbAb@~CXjB"

should be:

var trythis="mnniGr~|cNHl@Fl@BL??ABABAB?@?B?@@BHp@F`@Ht@L`A@?XW@A@A@?@??@?@@D@RJENEXKlA_@xBs@bA]LCRIXIJCNCrDo@REx@QXE|@QRE??b@hDTfBR|ArAfKVxBLh@bA|HDb@N`Ab@hDF`@Hp@BLHr@Jv@x@bGZ~B\\pCd@pD\\fC^rCVfBFb@F`@x@fGR|Af@nDPvAF`@LbA^rCHn@Lz@n@tEr@nFp@zENdA^xCZ`CLx@PvAT~AHl@PxAHn@ZrB^tCDPXtBFl@RzABRF`@ZbCJr@Hl@Jn@XnBN|@Hd@BJBHDJDJDLHNDDBFBBBBB@zBhCJNNRNZHVJVHXPlAFh@DXFj@BL@L@J@L@J@N?L@N?J@P?Z?d@EtAA\\C`BATAT?RALARAJAHALAHCLEXCFAJCHERERGVo@lCu@|Cg@zBWfA[rA[rAg@rBSz@UhASx@M|@O`AIz@Gv@Ex@Cd@GnBCx@@h@@rA?b@Bn@B^f@rDfAtINbAb@~CXjB"

code snippet:

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var polyline = new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath("mnniGr~|cNHl@Fl@BL??ABABAB?@?B?@@BHp@F`@Ht@L`A@?XW@A@A@?@??@?@@D@RJENEXKlA_@xBs@bA]LCRIXIJCNCrDo@REx@QXE|@QRE??b@hDTfBR|ArAfKVxBLh@bA|HDb@N`Ab@hDF`@Hp@BLHr@Jv@x@bGZ~B\\\\pCd@pD\\\\fC^rCVfBFb@F`@x@fGR|Af@nDPvAF`@LbA^rCHn@Lz@n@tEr@nFp@zENdA^xCZ`CLx@PvAT~AHl@PxAHn@ZrB^tCDPXtBFl@RzABRF`@ZbCJr@Hl@Jn@XnBN|@Hd@BJBHDJDJDLHNDDBFBBBBB@zBhCJNNRNZHVJVHXPlAFh@DXFj@BL@L@J@L@J@N?L@N?J@P?Z?d@EtAA\\\\C`BATAT?RALARAJAHALAHCLEXCFAJCHERERGVo@lCu@|Cg@zBWfA[rA[rAg@rBSz@UhASx@M|@O`AIz@Gv@Ex@Cd@GnBCx@@h@@rA?b@Bn@B^f@rDfAtINbAb@~CXjB"), map: map }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < polyline.getPath().getLength(); i++) { bounds.extend(polyline.getPath().getAt(i)); } map.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>