Jump into 3D maps by calculating orientation

Lets make a VirtualDrive MashUp today. As you know that Google maps API has Street view feature and Live maps has Bird’s Eye view feature. We will mix these 2 things in our mash-up.
Feature of This MashUp will be
  • To Take input as source and destination address.
  • Animate the street view & Bird’s Eye from source to destination.
To get this done you will need direction API to know the path between source and Destination. Eventually Google’s Direction API will do this for us. Direction API returns a PolyLine from source to destination. We will use GDirections.getPolyline() Function. Once you have all the points (Latitude and Longitude) along the path you are all set to go. But wait street-view and Bird’s Eye view are 3D Maps they also have something called orientation .
Bird’sEye View requires only one extra parameter "orientation" which can be
  • North
  • East
  • South or
  • West
Where as Google Street View is more complicated , its requires Yaw and Pitch (i am ignoring zoom level which applies to all kind of maps)
Since we will concentrate on driving , we will keep the pitch horizontal i.e. pitch will be zero.
Yaw can be calculated by using 2 points along the path. Yaw is the angle of your driving direction from North, in degrees.
Here is a JavaScript code to calculate Yaw with given 2 values of GLatLng.
(Note that Yaw & Bearing is closely related terms and they are having same value here.)
function GetBearing(GLatLng1, GLatLng2) { var lat1 =; var lon1 = GLatLng1.lng(); var lat2 =; var lon2 = GLatLng2.lng(); lat1 = lat1.toRad(); lat2 = lat2.toRad(); var dLon = (lon2 - lon1).toRad(); var y = Math.sin(dLon) * Math.cos(lat2); var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon); return Math.atan2(y, x).toBrng(); }
One feedback about street-view API though, function setLocationAndPOV is very mysterious and I could not make it work.
Individual Code snippets I picked from here
  1. Google AJAX Playground
  2. Live Map APIs Sample
  3. movable-type
Now Jump To Demo

And Do ViewSource to see the code.

No comments:

Post a Comment

Your comment will inspire me, Please leave your comment