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

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
}