how is this map created?

24 views
Skip to first unread message

john dingo

unread,
Jan 18, 2012, 10:15:24 AM1/18/12
to google-map...@googlegroups.com
http://www.lancashirebus.co.uk/times.jsp?routeID=90&iP_show=routes

The above website has a animated google map.
I have looked at the source code and can understand the basic co-ordinates used, however the route function seems to be coded

As you can see its coded like this:
var pathOut = "uzqgI|doLvAdHr@fIAn@Kx@An@Dn@C^|@|ElBnFb@t@|DhE~@pA`BpC|A|DvB~IvDzRhAxDR\\Nh@j@`ALf@vBpEtEhL|@bBb@f@vAj@`B^|Ex@xCTxERzDMdAFdAZd@\\jBzBhClBp@XvBZbDNlDClOg@xg@kI~G]xHOtDHvDr@bFxC|Ap@NGNS`@qA`@STNpB`FvAnCnU|P`EpDfCnA|ELpAPp@_@|@aAxBuDbDwBnCs@l@MvIK`@KT_@TGZd@B`@Ih@YRIdC~@PvBpCxAxBq@`CdBjBuBrGjA|AxI`N^~@d@XHOXC\\XDRvAhCVr@RtBC~@a@fEAxANzAn@|BlCtFx@jA|@t@j@T~FnAnLrBrAOzFqAv@Dz@ZdBtBh@`@~BlAnJlFT\\tGfEzGjD|Ar@vTlCfHn@dHTjUmAvJwBrCM|Ak@~@OvIz@bAf@dAvApBhDvMtVlGlJt@~AvAtEbDzKlAbF~@dHb@dEl@|Ch@jBdNp`@~D|K`A|BdAlA`DjCfKlGjIfFvCzApKxAhJt@xSfA~CJxBKhGuEnDkB|Bs@|CKt@RbBx@tDtCfC~Af@l@lEbDvBhCfCjBlAh@jBZzCM~@FjBn@|BpAlKpFtDrAlAH?m@?l@|@E`Be@|AsAzBeChDkB|Be@vG_A`FyAlB{@zCcBlByAz@w@j@_AvAiEXe@dBsAfBUjBAPiBxAM`BgAdBc@fBbB~AxCFnBbCvBzBrCtCtCxApBTr@AhA`A`D^jDNbDPtNJ`DL`Cj@nGj@bEvA~Gx@zCrA|D~ApDpA`ClBpCdAlA`FlElFbCjBd@`C^bDJxDOzB[v@e@`G_@tOKlGf@lEn@hEhAhj@bQvMlD~FfA|HfAxId@rCIpC]`Dg@~Bq@~DkBtCeBhHmFrC_BvCuAjC}@xGsAxBQtdA{A`DJlD^bJxBrEp@dDBdDKvC_@`EkAlEwBbEwCpBoBbCwCbBgCpDcHhHcOvEoIpE}GhDmEbIeJzBwCbH{KzEqJpGoOzCyFpCyDzEsF~EeEzDyB|DaBdEkAhC_@pLmAvEcA~EiBtEsBnLcH|DqBze@kS`GqC|EqCfDqAnFmAzB[lCDjER~Ch@tDfAbChA~GbCrFjAbFb@hJLnEMtEq@jLaCrHcAbJi@xZKfKSpG[tKw@jKoAbOgCd^aJjHeCzGcDtFeDzFeElC_C\\w@\\e@xE}FbE}Fd@aBFgAJi@nAgBdAmAl@A`@V`AvCZnANlAO|AbC`OpCnK@nAIZxHxa@jE`TvDrOtEhPpD|KnEdKzBnCjHzMfAbAlCt@`CStHiEGa@s@d@r@e@F`@tGoDvGqEzq@uo@b@o@tJeKbDgChFuHlAqAtCaBvF{ArDy@vAk@n@g@xAyA`GwH~AcCbAcBvIsTx@yAhAqAf@YtF}@`D{@`JyEf@[T_@PKzAo@^C`D_BnR}JjDgCtPqOxC_DbDqCvPmP|MuK`JoIlEsCh@a@HS|BsA~AsA^SNDnDcCrDFbAHvBr@`@VTChAXfA|@`HhEhKlG~@oG|@sHTQ`@mBRi@nBoDjAgC~BkGfCuFoFiKbCuF";
var levelsOut = "PCB@@@?CEC@@CADAAD@@?@@B@IB?D?BAEABBD@BF@DCEADCAE@AAGA@DABGAEABCE?CCAAHACABDC@DDEE@ACBABC@EAC@BAEACAHAAEABFB@C?BAB@EGAECBA@DBI@AAAE?AC@AD@A@GAC?AIAC@FCACBGAB@C@BAEACADA?CBHCCAC@BD@CAEA@DA@CEADDBBIBCCAABAFBBC@@?C@BF@B@D@BIACAEBABDBFACAD@BLABAEB@ADABGAEACABDABIBC@EA@AD@B@DCAADAHCAEABCAEA@CBAAH@D@EABABDAFABADBAD@BHBDBFBAE@AACA@C@JAC@DACBB@CDBAFBCBEBCJBBDCBAEB@ACAEB@BAFAB?DC@FAADB@@B@B?FAB@ACABA@AAHAAD@F@AACA?H@DA@A@AAFEP";
var pathIn = 


How can I create a similar animated map for a walking tour route?
It seems the code to create the route, ie, the blue lined route is in some special code.,

There must be a way to create a similar kind of map but cant understand how, anyone any ideas?
I did email the website creator but they will not reply.

alex

unread,
Jan 18, 2012, 4:30:50 PM1/18/12
to google-map...@googlegroups.com

john dingo

unread,
Jan 18, 2012, 6:13:27 PM1/18/12
to Google Maps JavaScript API v3
thanks for the link but its not exactly the same as the original link
i gave,.
its how to create the specific route as shown in the blue. It does not
follow a normal google map direction, its a bus route so passes along
non direct streets. In the source code i can understand the co-
ordinate part its the creating the specific route that seems to be
encrypted/coded as sjown but the gobblegook as shown above.


On Jan 18, 9:30 pm, alex <alexander.roehni...@googlemail.com> wrote:
> http://econym.org.uk/gmap/example_cartrip.htm

Rossko

unread,
Jan 18, 2012, 6:33:09 PM1/18/12
to Google Maps JavaScript API v3
> In the source code i can understand the co-
> ordinate part its the creating the specific route that seems to be
> encrypted/coded as sjown but the gobblegook as shown above.

Keywords : encoded polyline
http://code.google.com/apis/maps/documentation/utilities/polylinealgorithm.html
better description
http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/
The 'levels' part isn't used in v3 API
http://code.google.com/apis/maps/documentation/javascript/geometry.html#Encoding
Reply all
Reply to author
Forward
0 new messages