Creating 3d Buildings with Google Maps

You are not allowed to view links.
Please Register or Login" imageanchor="1" target="_blank"><img border="0" src="

You are not allowed to view links.
Please Register or Login" />[/url]



I had one of those 'I wish I'd thought of that' moments this week when I saw the awesome <a href="

You are not allowed to view links.
Please Register or Login" style="color: #cc0000;" target="_blank">DTS Dallas Theological Seminary[/url] 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 <a href="

You are not allowed to view links.
Please Register or Login" style="color: #cc0000;" target="_blank">3d Polygon[/url] demo map. My solution to creating the polygons differs a little from the DTS map (see the comments on this <a href="

You are not allowed to view links.
Please Register or Login" style="color: #cc0000;" target="_blank">post [/url] 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:&nbsp;



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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; buildingOne.setMap(null);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingTwo.setMap(null);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingThree.setMap(map);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingFour.setMap(null);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; else if&nbsp; (heading == 270) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingOne.setMap(null);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingTwo.setMap(null);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingThree.setMap(null);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; buildingFour.setMap(map);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<img src="

You are not allowed to view links.
Please Register or Login" height="1" width="1"/>

You are not allowed to view links.
Please Register or Login

Linkback:

You are not allowed to view links.
Please Register or Login