Encoded path in MySQL database

Question

I have encoded the paths of several polylines using google.maps.geometry.encoding.encodePath() and want to store them in a MySQL table.

Problem: Before storing them into the table, I drew out the polylines as shown in the top half of the image below. However, after storing them into the table, retrieveing them and drawing again, the path seems to have changed! What happened?

Additional Info: I notice that if i were to write the freshly encoded path to console.log, copy from the console log and use this copied path to draw a new polyline, the polyline gets distorted at certain areas, just like what happened after using the encoded path that was retrieved from the database!

---

Update

Polyline using freshly encoded path

JS Code

encoded_path = google.maps.geometry.encoding.encodePath(path);
console.log(encoded_path);

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

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

Encoded path from console.log

axwaGtbcqLBgArBmAjCcBlBcCnBeChB_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@bBkBnBcBzCqCAi@pCmA^mAd@qA

---

Polyline using path retrieved from database

Value stored in column VARCHAR(255)

Copied using Navicat

axwaGtbcqLBgArBmAjCcBlBcCnBeChB_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}@

---

Polyline using path retrieved from database with VARCHAR(1000)

Value stored in column VARCHAR(1000)

Copied using Navicat

axwaGtbcqLBgArBmAjCcBlBcCnBeChB_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@bBkBnBcBzCqCAi@pCmA^mAd@qA

---

Polyline by decoding the encoded path written to console.log

JS Code

  //encoded path copied from console.log output from the very first code in post
    encoded_path = 'axwaGtbcqLBgArBmAjCcBlBcCnBeChB_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@bBkBnBcBzCqCAi@pCmA^mAd@qA';
decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);

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

---

Path that did not work correctly as well

I notice that there are newlines in the middle of these encoded strings? Also, the encoded string splits the line of code into 2 lines, causing the error checking system in my editor to show an alert.

JS Code (Malformed)

encoded_path = '{traGxcspLaIkFvAwH}BgA{EzEjCgJmEwBmDvGoHpAkLQpAqGyF_CbCuH^}FlDwEo Cyn@y@g[yL{c@wb@e@sG@kHgEaBiJ}EiHzMwLdFga@{U{KoZoZhH{e@hh@~RlBgJ{AgMrAkQrD[rCl@pNmAhJeCgDhQdGlItBpQbTb@EdQoBtMaJzSoEf@bMzLlHRj@lHrFhCnHrNvAk@qBeOpAcAlRvCfEgQt@oB_JeBmTmL}DqJl@qHbCmEzFc]xr@nT|IoKf@RlGdFtCuMpEzAbS}[qGe{@dOsEnGjZhInDrHwIjEdH_OtdAf@~WnM`F~AyN_DgEzh@nKgTvVbBrNoZvB_SvLwGfJwT~w@wG?gBzB?xFdAt@xFn@bBve@?nPoKv[kGwBsCdGoCtBwFoBwCfFcBvBoArDsC]{AxA';

Encoded Path

{traGxcspLaIkFvAwH}BgA{EzEjCgJmEwBmDvGoHpAkLQpAqGyF_CbCuH^}FlDwEo Cyn@y@g[yL{c@wb@e@sG@kHgEaBiJ}EiHzMwLdFga@{U{KoZoZhH{e@hh@~RlBgJ{AgMrAkQrD[rCl@pNmAhJeCgDhQdGlItBpQbTb@EdQoBtMaJzSoEf@bMzLlHRj@lHrFhCnHrNvAk@qBeOpAcAlRvCfEgQt@oB_JeBmTmL}DqJl@qHbCmEzFc]xr@nT|IoKf@RlGdFtCuMpEzAbS}[qGe{@dOsEnGjZhInDrHwIjEdH_OtdAf@~WnM`F~AyN_DgEzh@nKgTvVbBrNoZvB_SvLwGfJwT~w@wG?gBzB?xFdAt@xFn@bBve@?nPoKv[kGwBsCdGoCtBwFoBwCfFcBvBoArDsC]{AxA

Answer 1

The slashes in the string literal returned by encodePath() are being interpreted prior to write, whether the write is to screen or to database.

What I would do is escape the slashes at the earliest possible point:

encoded_path = google.maps.geometry.encoding.encodePath(path);
encoded_path = encoded_path.replace(/\\/g,"\\\\");

This should ensure that the string written to the database (or log) is correct, and you shouldn't have to do anything special on the read.

Alternatively, you can escape the slashes right before passing the string into another medium, such as just prior to your AJAX call or, as mentioned in the comments, in the console.log() method call.