Monday, February 14, 2005

Hacking Google Maps

There's been a flurry of hacking as soon as Google Maps (beta!)was released. There was the usual analysis of how the whole thing was being pulled off by Google.

Then the real hacking began.

First, there were bookmarklets by "follower", to pan the map automatically to follow the route, and then moving an image of little man along the path. Several others chipped in with improved versions replacing the man with a spider. But the man and the spider were pretty slow.

Then, there was another version to map the route in a faster and smoother fashion from Ayhan Ergul.

I noticed that after I ran this bookmarklet, the links on the map were non-functional due to javascript varibale name conflict. The bookmarklet was using a variable d. Google Maps' javascript code also uses the same name for an object and the bookmarklet's variable overwrites Google's.

Replacing the variable name in the bookmarklet code by any other unique name fixes this problem. Ergul's site doesn't have any email address to notify him.

Here's the bookmarklet (All I did was replace the variable d with dd). Blogger doesn't seem to accept javascript: links, so here's the code all in its raw glory:

javascript:(function(){if(!_m.map.me){_m.map.me=_m.map.createLocationMarker('http://libgmail.sourceforge.net/man.png',N.get('local'));}_m.map.timeSlice=60;_m.map.totalTime=3000;_m.map.sliceCount=_m.map.totalTime/_m.map.timeSlice;_m.map.totalDistance=0;_m.map.c3=new Object();p=_m.map.directions.polyline;_m.map.cumDistance=new Array(p.numPoints);_m.map.cumDistance[0]=0;c1=p.getPoint(0);for(i=1;i<p.numPoints;i++){c2=p.getPoint(i);_m.map.cumDistance[i]=_m.map.cumDistance[i-1]+Math.sqrt(Math.pow(c2.x-c1.x,2)+Math.pow(c2.y-c1.y,2));c1=c2;}_m.map.speed=_m.map.cumDistance[p.numPoints-1]/_m.map.sliceCount;mv=function(i){p=_m.map.directions.polyline;j=0;while(_m.map.cumDistance[j+1]<(i*_m.map.speed)){j++;}c1=p.getPoint(j);c2=p.getPoint(j+1);dd=_m.map.cumDistance[j+1]-_m.map.cumDistance[j];if(dd){l=(i*_m.map.speed)-_m.map.cumDistance[j];_m.map.c3.x=c2.x-(c2.x-c1.x)*(dd-l)/dd;_m.map.c3.y=c2.y-(c2.y-c1.y)*(dd-l)/dd;}else{_m.map.c3.x=c2.x;_m.map.c3.y=c2.y;}_m.map.recenterOrPanToLatLng(_m.map.c3);_m.map.setMarkerPosition(_m.map.me,N.get('local'),_m.map.c3);if(i<_m.map.sliceCount){window.setTimeout('mv('+(i+1)+')',_m.map.timeSlice);}else{_m.map.me.hide();}};_m.map.me.show();mv(1);})();

And, the fixed up code formatted nicely (copied from Ergul's site and fixed up).

javascript:
(function ()
{
    if (!_m.map.me)
    {
        _m.map.me = _m.map.createLocationMarker('http://libgmail.sourceforge.net/man.png', N.get('local'));
    } 
    _m.map.timeSlice = 60;
    _m.map.totalTime = 3000;
    _m.map.sliceCount = _m.map.totalTime/_m.map.timeSlice;
    _m.map.totalDistance = 0;
    p = _m.map.directions.polyline;
    for (i=0; i<p.numPoints-1; i++)
    {
        c1 = p.getPoint(i);
        c2 = p.getPoint(i+1);
        _m.map.totalDistance += Math.sqrt(Math.pow(c2.x-c1.x, 2)+Math.pow(c2.y-c1.y, 2));
    }
    _m.map.speed = _m.map.totalDistance/_m.map.sliceCount;
    mv = function(i) 
    { 
        p = _m.map.directions.polyline;
        travelled = 0;
        j = 0;
        while(1)
        {
            c1 = p.getPoint(j);
            c2 = p.getPoint(j+1);
            dd=Math.sqrt(Math.pow(c2.x-c1.x, 2)+Math.pow(c2.y-c1.y, 2));
            if((travelled+dd) >= (i*_m.map.speed))
                break;
            travelled += dd;
            j += 1;
        }
        _m.map.setMarkerPosition(_m.map.me, N.get('local'), c1);
        if(i%3==0)
            _m.map.recenterOrPanToLatLng(c1);
        if (i < _m.map.sliceCount) 
        {
            window.setTimeout('mv('+(i+1) + ')',_m.map.timeSlice);
        } 
        else 
        {
            _m.map.me.hide()
        }
    };
    _m.map.me.show();
    mv(0);
}
)();

1 Comments:

At 2/15/2005 06:04:00 AM, Anonymous Follower said...

I've emailed a link for this to Ayhan--thanks for pointing the problem out.

For the record, it was me that added the spider too. :-)

If you haven't seen the recent "Part 5" update, you might want to take a look--it's going to enable a whole new class of Google Maps customisation.

--Phil.

 

Post a Comment

Links to this post:

Create a Link

<< Home