Creating 3d Buildings with Google Maps

Update: John Dyer has now posted a full tutorial explaining how he created 3d buildings on the DTS campus map. John's method is a lot more elegant than mine.


I had one of those 'I wish I'd thought of that' moments this week when I saw the awesome DTS Dallas Theological Seminary campus map. The map uses polygons and the Google Maps 45° Imagery view to create the impression of 3d buildings on Google Maps.

Today I had a little play with the Google Maps API to see if I could reproduce the effect. The result is this little 3d Polygon demo map. My solution to creating the polygons differs a little from the DTS map (see the comments on this post for some clues as to their solution).

In essence I simply create four different building polygons, one for each heading in the 45° Imagery view. So when the user rotates the map only the correct building polygon is displayed on the map. To achieve this you have to use getHeading() with an event listener to detect when the map view has been changed.

My solution is to have four different building polygons and then create an if...else statement to load the correct building polygon. Here's the important part of the code: 

       if  (heading == 0)  {
       buildingOne.setMap(map);
       buildingTwo.setMap(null);
       buildingThree.setMap(null);
       buildingFour.setMap(null);
       }
     
       else if  (heading == 90) {
       buildingOne.setMap(null);
       buildingTwo.setMap(map);
       buildingThree.setMap(null);
       buildingFour.setMap(null);
       }
     
       else if  (heading == 180) {
       buildingOne.setMap(null);
       buildingTwo.setMap(null);
       buildingThree.setMap(map);
       buildingFour.setMap(null);
       }
     
       else if  (heading == 270) {
       buildingOne.setMap(null);
       buildingTwo.setMap(null);
       buildingThree.setMap(null);
       buildingFour.setMap(map);
       }