Question

Is there any way to implement the same “bounce” functionality from Google Earth when shifting from one point to another in Google Maps? e.g. If you switch between the listed earthquakes at:
http://earthquakeproject.com/?earth
the gui “bounces” you between the locations on the globe
if you do the same thing at http://earthquakeproject.com/?maps it simply slides between those locations. I’d like the functionality to feel the same between the two.

Answer 1

So.. couldn’t find a solution so tis is what I ended up doing, in case anyone else needs to do the same thing. and yes, I know it could be neater…

first I found a function to determine the distance, and used that to come up with a relative jump amount ranging from 1 to 4

 function sloc(lat,lon){
            sloc_obj.lat1=sloc_obj.lat2;
            sloc_obj.lon1=sloc_obj.lon2;
            sloc_obj.lat2=lat;
            sloc_obj.lon2=lon;
            var R = 6371; // km
            var d = Math.acos(Math.sin(sloc_obj.lat1)*Math.sin(sloc_obj.lat2) + 
                Math.cos(sloc_obj.lat1)*Math.cos(sloc_obj.lat2) *
                Math.cos(sloc_obj.lon2-sloc_obj.lon1)) * R;

            if(d<1000){
                return 1;
            }
            if(d<5000){
                return 2;
            }
            if(d<10000){
                return 3;
            }
            return(4);
        }

then I used that to stagger out a set of time-delayed actions…

   var l1=$(this).data('lat');
                    var l2=$(this).data('lon');
                    //set up array for times actions
                    var cmd=[]
                    //get the zoom-level based on the distance between two lat/lon spots
                    var d=sloc(l1, l2);
                    //based on our max flyout level, populate our times commands
                    if(d>=1){cmd[cmd.length]="map.setZoom(5)";}
                    if(d>=2){cmd[cmd.length]="map.setZoom(4)";}
                    if(d>=3){cmd[cmd.length]="map.setZoom(3)";}
                    if(d>=4){cmd[cmd.length]="map.setZoom(2)";}
                    cmd[cmd.length]="map.panTo(new google.maps.LatLng("+l1+","+l2+"),"+(1+d)+");";
                    if(d>=4){cmd[cmd.length]="map.setZoom(3)";}
                    if(d>=3){cmd[cmd.length]="map.setZoom(4)";}
                    if(d>=2){cmd[cmd.length]="map.setZoom(5)";}
                    if(d>=1){cmd[cmd.length]="map.setZoom(6)";}
                    timer_offset=0;

                    //get the number of steps for our cmd iterator. subtract 1 so we get the middle step in our math since the number of steps will always be odd
                    steps=cmd.length-1
                    //iterate over ALL the steps.
                    for(x=0;x<=steps+1;x++){
                        //for the middle step, wait a bit more than normal
                        if(x>=steps/2){
                            timer_offset=(100*d);
                        }
                        //at the end of the middle action pan, wait a bit even more than that
                        if(x>=(steps/2)+1){
                            timer_offset=(100*d)+200;
                        }
                        //set our timeout
                        time=200+(x*100+timer_offset)
                        //load the command on the timeout
                        setTimeout(cmd[x],time);
                    }

This way I get a reasonably smooth transition out, over and in that is reflective of the amount of distance actually traveled. I’ll try to do this more neatly, maybe with a more logarithmic ease in and out, but it’s better than flat panning.