Encoded polylines using JQuery

Question

I've been given some encoded polylines to display on a google map. However I'm using JQuery for a lot of the front end functions and am now stuck trying to find the correct syntax for displaying encoded polylines using JQuery. The standard syntax for adding an encoded polyline is

var polyline = new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "_gkxEv}|vNM]kB}B}@q@YKg@IqCGa@EcA?c",
  levels: "P@B@D??@@?D?CA?B",
  zoomFactor: 2,
  numLevels: 18
});
map.addOverlay(polyline);

Obviously this doesn't work with JQuery. to add a normal polyline with JQuery you'd use

new google.maps.Polyline({
            path: stationPathCoordinates1,
            strokeColor: "#20B5B3",
            strokeOpacity: 1.0,
            strokeWeight: 4

Where StationPathCoordinates is the array of long and lats. I now have this array in an encoded polyline. I assumed it may be new google.maps.Polyline.fromEncoded but this doens't work. Anyone know the syntax for this in JQuery or if it even possible?

Thanks in advance

Answer 1

As @belugabob pointed out already, there shouldn't be any reason for conflicts with jQuery in general while using APIs like the Google Maps JavaScript API.

That said, and without seeing a full example, I can only deduce the following:

• The two code fragments you are presenting seem to stem from two entirely different versions of the Google Maps JavaScript API, namely Google Maps JavaScript API V2 for the former and Google Maps JavaScript API V3 for the latter (see section PolylineOptions object specification there).

  • The V2 API version has been deprecated as of may 19, 2010, but will be supported for a period of 3 years as per Googles respective deprecation policy.

  • The V3 API version does not (yet) support encoded polylines, see Thors answer to point 5 in this migration to V3 thread (see Encoded polylines vs Polyline class for some background on this change, if desired).

So in case you need to maintain using encoded polylines you have two options:

1. Continue to use the V2 API, which implies making your first code fragment work as it should; you'll need to provide more details then for us to figure out what's wrong with your code (as jQuery is most likely not to blame here!), two points upfront though:

   • Best guess: the API version mix and your comment regarding belugabobs question is suggesting that you might simply be missing some or including the wrong dependencies!

   • Another observation: at least according to the Interactive Polyline Encoder Utility the encoded points and levels in your first code fragments do not match.

2. Upgrade to the V3 API, which implies decoding your encoded polylines to an Array or MVCArray of LatLng. I'm not aware of an official example, but for a starting point you could look into Esas answer within the Encoded polylines? thread, which is pointing towards thedecodeLine() function in the Google Polyline Utility source code as well as a sample decoder.

Good luck!