Putting 3D Google Maps on the Web (using Flash 10)

Intro

To this point, I’ve been putting Google Maps into Air applications due to the Flash Sandbox issue encountered in PV3D (discussed in a previous post). But in CS4, guess what, it’s not an issue. They go right on the web as you can see from the demo below:

Google Map in 3D on the Web

Google Map in 3D on the Web

Demo

Source

Discussion

Now here is how you do it, and it’s so simple you will not believe it. Use the code below to put your map into a movie where it’s free to move freely in 3D.

movie.addChild(map);

Placing a Google Map on a CS4 Plane is easier in Flex 4 (Gumbo) than it is in PV3D. All you do is throw your map into a movie clip using the code below, and then center it to get your map pivot right. The code snippet below sets your map in a movie clip, centers its pivot, sets map controls, places your movie in a Flex canvas, and centers your movie on the stage.

//Place your map in a movie so you can position its pivot
movie.addChild(map);

//Set your map pivot
map.x=-map.width/2;
map.y=-map.height/2;

//Add Map Controls
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());

//Put your movie in a Flex Canvas
mapHolder.rawChildren.addChild(movie);

//Center your Movie
movie.z=0;
movie.x=450;
movie.y=300;

The map also has two additional Flex components; a button, which stops it from spinning and a slider, which adjusts its speed and direction of rotation.

This is the great power of CS4 over PV3D. You can now bring native Flex components into your 3D environment in conjunction with your 3D objects. Bringing Flex components into PV3D is a difficult task and requires the use of the draw BitmapData feature. But with CS4 it occurs natively, and those components can be manipulated in 3D as well.

Hey that’s it, how crazy can that be! And all the controls and buttons are fully functional and in the right place.

Note: You could have just rotated the map directly, but you put it in a movie to control positioning and its pivot point.

The rest of the code is shown in the link below and discussed in greater detail in Chapter 7 of the book.

Full Code

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; xmlns:maps=”com.google.maps.*” layout=”absolute” width=”1200″ height=”800″  backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#9B9FAB, #05184C]“>
<maps:Map xmlns:maps=”com.google.maps.*”
id=”map”
mapevent_mapready=”onMapReady(event)”
width=”800″ height=”600″
url=”http://www.professionalpapervision.com/demos/projects/tour/&#8221;
key=”ABQIAAAA4LpFEu2In0mhf90kMq6mnRS-6gvR7plocG5jEAw_XBK5krTJ_RRxjCMUXsM0nZ0Gam53OPR26zHU5w”/>

<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import com.google.maps.*;
import com.google.maps.controls.*;
import mx.events.MoveEvent;

//Create map holder, oscillation angle, and rotation parameters
private var myAngle:Number=0;
private var movie:MovieClip = new MovieClip();
private var stopRotation:Boolean = false;
private var rotationValue:Number = -.05;

//When the map is ready run this function
private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
//Place your map in a move so you can position its pivot
movie.addChild(map);
//Set your map pivot
map.x=-map.width/2;
map.y=-map.height/2;
//Add Map Controls
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
//Put your movie in a Flex Canvas
mapHolder.rawChildren.addChild(movie);
//Center your Movie
movie.z=0;
movie.x=450;
movie.y=300;

addEventListener(Event.ENTER_FRAME, frameLoop);

}

//Pause or rotate button for your map
private function pauseRotate(event:MouseEvent):void{

if(mouseBtn.label=="Stop"){
mouseBtn.label="Start";
stopRotation = true;

}else{
mouseBtn.label="Stop";
stopRotation = false;
}
}

//Map Slider
private function mySliderHere(event:SliderEvent):void{

rotationValue=-mySliderValue.value;

}

//Map animation loop - enable rotation
private function frameLoop(event:Event):void
{
//Iterate animation variable
//Rotate map if stopRotation is equal to false
if(!stopRotation){

movie.rotationX+=rotationValue;

}
}

//Set up canvas components below

]]>
</mx:Script>

<mx:Canvas x=”0″ y=”0″ width=”60″ height=”73″ id=”mapHolder”></mx:Canvas>
<mx:Canvas x=”87″ y=”7″ width=”267″ height=”65″ backgroundColor=”#DFAAF7″>
<mx:Button x=”19.5″ y=”10″ label=”Stop” id=”mouseBtn”   click=”pauseRotate(event)” />
<mx:HSlider x=”87.5″ y=”15″ minimum=”-4″ maximum=”4″ id=”mySliderValue” value=”.05″ change=”mySliderHere(event)” />
<mx:Label x=”108.5″ y=”33″ text=”Speed and Direction”/>
</mx:Canvas>
</mx:Application>

About these ads

2 Responses to Putting 3D Google Maps on the Web (using Flash 10)

  1. [...] > Putting 3D Google Maps on the Web (using Flash 10) « Professional Papervision3D Book [...]

  2. Gregory Chatonsky says:

    I’m a french artist. You can see my works at http://gregory.incident.net.
    I start a new art project and I want to use Papervision and Google Maps API (or another geo API) to make it.
    I see on the web that you work on this conjunction and I want to know if you are interested to work as a freelance on my project. It’s a simple and experimental project.
    If you are interested, I can send you an abstract about this project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: