How to use encoded polylines returned by the Google Maps Web Service

[Christian Zambrano]

The response of a request for direction to the Google Maps Web Service includes encoded polylines in the element overview_polyline. I would like to display these polylines on a Javascript google map V3 but there doesn't seem to be a way. Am I missing something? V2 had GPolyline which accepted encoded Polylines.

Any help would be greatly appreciated.

[geoco...@gmail.com]

On Dec 14, 8:24 pm, Christian Zambrano <czamb...@gmail.com> wrote:
> The response of a request for direction to the Google Maps Web Service
> includes encoded polylines in the element overview_polyline. I would like to
> display these polylines on a Javascript google map V3 but there doesn't seem
> to be a way. Am I missing something? V2 had GPolyline which accepted encoded
> Polylines.

Encoded Polyline decoders exist:
http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/

Example:
http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=I5Polyline_encoded.xml

-- Larry

[mikecouk]

Would I be right in saying that this decoder only does polyline points
to an array of points, without taking into consideration the levels ?
It would be great to have a fully featured decoder like V2 has. Have
google officially removed polyline decoding with levels for good ?

Mike


On Dec 15, 5:10 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Dec 14, 8:24 pm, Christian Zambrano <czamb...@gmail.com> wrote:
>
> > The response of a request for direction to the Google Maps Web Service
> > includes encoded polylines in the element overview_polyline. I would like to
> > display these polylines on a Javascript google map V3 but there doesn't seem
> > to be a way. Am I missing something? V2 had GPolyline which accepted encoded
> > Polylines.
>
> Encoded Polyline decoders exist:http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/
>

> Example:http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=I5Polylin...

[Christian Zambrano]

Mike,

I am wondering the same thing. I know I can decode an encoded polyline but as you correctly pointed out it doesn't take into account levels. Also, if the new JS API version doesn't include a way to use encoded polyline how are the Google Maps Web Service for directions suppose to work with the JS API?

Something doesn't seem quite right. In order to get around this issue I am having to also request directions using the JS API in order to show a map with the router highlighted.

[bratliff]

For some examples, look at:

http://www.polylib.us/polycluster/coast/encoded.html
http://www.polylib.us/polycluster/coast/chicago.html
http://www.polylib.us/polycluster/coast/hawaii.html

The first is legal. The last two may not be legal due to calling
Google's KML parser directly. I will ask for an opinion from Google
in another thread.

Both the API & PolyCluster perform point reduction "on the fly". The
"levels" zoom string is a relic of the past. It adds 50% dead weight
to the total payload. It does nothing to reduce the size of the poly
itself.

For what it is worth, "mouse event" support was added to PolyCluster a
couple of months ago.

See:

http://www.polylib.us

for additional demos, class reference documentation & an in progress
tutorial.

[Chris Broadfoot]

The documentation for the encoding algorithm is here:

http://code.google.com/apis/maps/documentation/utilities/polylinealgorithm.html

and a sample here:

http://code.google.com/apis/maps/documentation/utilities/polylineutility.html

(albeit it is implemented in v2)

Chris

On Wed, Dec 15, 2010 at 3:24 PM, Christian Zambrano <czam...@gmail.com> wrote:

The response of a request for direction to the Google Maps Web Service includes encoded polylines in the element overview_polyline. I would like to display these polylines on a Javascript google map V3 but there doesn't seem to be a way. Am I missing something? V2 had GPolyline which accepted encoded Polylines.

Any help would be greatly appreciated.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Sebastian]

To use a polyline from the Direction Web service, you need the
google.maps.geometry.encoding.decodePath() function from the geometry
library.

Load the V3 API with:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
libraries=geometry&amp;sensor=false">
</script>



Create the map, set markers for start and destination and so on.

Replace backslashes '\' in points with '\\', it seems the levels are
kinda ballast from V2 (?).

var encodedPoints = "s}dcFlnchVz@n@vJeVpF}NzMy\\}
KyI{AoBg@{@wKmWs@wB_AsE_@wEQkLQ}Cy@qE{@kCiBsD{_@_r@qS{\
\mBqDoOw^mBwGOqAPyEGsAKu@eBmEOu@Eu@X}DEu@r_@osCjJyi@|
AiH~B_NxJoe@j[kdBjLwl@rJkh@zG_]jCsOhEe\\`Iur@pBuOjAuLhAsI|
BcPnCuNhAiEz@_B~@kA|
AgAnLcDvBmAt@o@dBwBxEwJtI_PzBcDdE_EnVePpg@o]lKsFzJgE`EkCjCqCrB{CvAwCtBmFfAsB`DiEdC_CpEkClGgC`EyBrG_ETAdHuDx@YdAKhEb@jB]hAi@{EaOmDqJeEnC" ;

var decodedPoints =
google.maps.geometry.encoding.decodePath(encodedPoints) ;

var encodedPolyline = new google.maps.Polyline ( {
strokeColor: "#970E04" ,
strokeOpacity: 1.0 ,
strokeWeight: 2 ,
path: decodedPoints ,
clickable: false
} );
encodedPolyline.setMap(myMap);

Done.

HTH
Sebastian


On Dec 15 2010, 5:24 am, Christian Zambrano <czamb...@gmail.com>
wrote:

[Josh]

I tried to pass the "decodedPoints" directly as Sebastian has shown in
his example without success. I don't know if Sebastien was just
showing this as a brief example of the method but, the decoded results
that I get are not setup as LatLng points that I can directly shove in
the "path" property of the Polyline.

I had to take the result and parse it as a string in order to setup a
new "path" of acceptable LatLng points. Is there an easier way of
creating the Polyline "path" with the decoded result(like in
Sebastian's example which doesn't work for me)?



Rough code I just used to make the decoded sets acceptable:

var path = routePath.getPath();//the path of the Polyline already on
the map
var points=new Array();
decodedSets=google.maps.geometry.encoding.decodePath("encodedpointstobedecoded").toString();
//get rid of the brackets
decodedSets=decodedSets.replace(/\,\(/gi, "");
decodedSets=decodedSets.replace(/\(/gi, "");

var brokenstring=decodedSets.split(")");
for(var i in brokenstring){
if(brokenstring[i].length>1){
points=brokenstring[i].split(",");
myLatLng = new google.maps.LatLng(points[0],points[1]);
path.push(myLatLng);

}
}





On Jan 13, 12:16 pm, Sebastian <sebastian....@googlemail.com> wrote:
> To use a polyline from the Direction Web service, you need the
> google.maps.geometry.encoding.decodePath() function from the geometry
> library.
>
> Load the V3 API with:
>
> <script type="text/javascript" src="http://maps.google.com/maps/api/js?
> libraries=geometry&amp;sensor=false">
> </script>
>
> Create the map, set markers for start and destination and so on.
>
> Replace backslashes '\'  in points with '\\', it seems the levels are
> kinda ballast from V2 (?).
>
> var encodedPoints   = "s}dcFlnchVz@n@vJeVpF}NzMy\\}
> KyI{AoBg@{@wKmWs@wB_AsE_@wEQkLQ}Cy@qE{@kCiBsD{_@_r@qS{\
> \mBqDoOw^mBwGOqAPyEGsAKu@eBmEOu@Eu@X}DEu@r_@osCjJyi@|
> AiH~B_NxJoe@j[kdBjLwl@rJkh@zG_]jCsOhEe\\`Iur@pBuOjAuLhAsI|
> BcPnCuNhAiEz@_B~@kA|

> AgAnLcDvBmAt@o@dBwBxEwJtI_PzBcDdE_EnVePpg@o]lKsFzJgE`EkCjCqCrB{CvAwCtBmFfAs B`DiEdC_CpEkClGgC`EyBrG_ETAdHuDx@YdAKhEb@jB]hAi@{EaOmDqJeEnC" ;

[Christian Zambrano]

Josh,

My understanding is that getPath will return an MVCArray of LatLong
elements so there is nothing to decode as they are not encoded to
begin with. You can update the path by simply pushing a new element to
it and the Polyline will immediately reflect the change.

[Josh]

Ya I guess that's a bit vague in my example code because I didn't
include my initial Polyline. I just used "getPath" there to have a
reference to the "blank path" that I have started in order to push in
the decoded points. I loop through a google-directions request with
php and construct the javascript above to go through all the encoded
"points" , decode them, parse them, convert them to google LatLng's,
and then push them into that "blank path".

I was just wondering if it was possible to use the decodePath result
directly with the polyline like Sebastian has done in his example.
When I try to do that I don't get a proper path because it doesn't
recognize the decodePath result as a set of LatLng's.

On Feb 9, 4:34 pm, Christian Zambrano <czamb...@gmail.com> wrote:
> Josh,
>
> My understanding is that getPath will return an MVCArray of LatLong
> elements so there is nothing to decode as they are not encoded to
> begin with. You can update the path by simply pushing a new element to
> it and the Polyline will immediately reflect the change.
>
> On Feb 9, 2:37 pm, Josh <gallagherj...@gmail.com> wrote:
>
>
>
>
>
>
>
> > I tried to pass the "decodedPoints" directly as Sebastian has shown in
> > his example without success. I don't know if Sebastien was just
> > showing this as a brief example of the method but, the decoded results
> > that I get are not setup as LatLng points that I can directly shove in
> > the "path" property of the Polyline.
>
> > I had to take the result and parse it as a string in order to setup a
> > new "path" of acceptable LatLng points. Is there an easier way of
> > creating the Polyline "path" with the decoded result(like in
> > Sebastian's example which doesn't work for me)?
>
> > Rough code I just used to make the decoded sets acceptable:
>
> > var path = routePath.getPath();//the path of the Polyline already on
> > the map
> > var points=new Array();

> > decodedSets=google.maps.geometry.encoding.decodePath("encodedpointstobedeco ded").toString();

[Esa]

I would recommend using setPath() method of Polyline.

It accepts the array of LatLng's that is returned by decodePath();

[Josh]

Thanks Esa!

setPath() works beautifully just like so:
decodedSets=google.maps.geometry.encoding.decodePath("stuffToBeDecoded");
polyLine.setPath(decodedSets);

I also concatenated several decoded results into an array and that
still works fine in setPath().