Life Google maps in PDF

Animated Google maps in PDF

Maybe you already know (or maybe not yet) that a PDF file, the Portable Document Format, can also be a very interactive and dynamic document. This format offers a wide range of interactive features.

Today I would like to share with you something that has fascinated me for a long time – How to embed and control live Google maps in PDF. Although I’m not a programmer, I managed to create it and enhanced it with animations. Now I have a PDF with an embedded SWF Google map. This SWF was predesigned with geolocations and ActionScript that drives animated fly to actions and Acrobat buttons that trigger these actions.

Of course, some coding is necessary. We’ll create an ActionScript SWF Google map file, and we’ll also create buttons in Acrobat that will run a Javascript action.

Tools: Adobe InDesign CS5 or higher, Adobe Acrobat 9 or higher, Adobe Flash • Time: 2 hours

Creating Acrobat buttons and Google map placeholder in InDesign

1. First of all, let’s design our PDF that will be a framework where we’ll embed our map. I decided to use InDesign for this because I like creating interactive features there. We can build rollover buttons there and also a frame that would serve as a placeholder for our Google map.

media placeholder in Indesign

Creating media placeholder

Launch InDesign and create a new A4 landscape document. Now press F (Frame tool) on your keyboard and drag a frame with a size you wish to have for the map. Use move tool and smart guides if you want to have it centered.

Now we want to create buttons that will trigger our mapFlyto action. Go to Workspace settings (top right corner of InDesign) and change it to interactive fo PDF or go to Window → Interactive  Buttons. In InDesign you can create buttons very easily. Create any object (text, frame or grouped elements) you wish and then right click and select Interactive - Convert to button. With a button selected you can now create 3 stages (Normal, Active and Clicked). I decided to create button in form of a bubble speech. I applied a shadow effect to it and changed the color of text and filled for rollover stage. You can also preview your buttons in action with preview panel or click on the little play icon in the bottom left of the button panel.

Creating buttons in Indesign

Creating buttons in InDesign

Styling rollover button in Indesign

Styling rollover button in InDesign

Note that buttons must be outside the area of the placeholder frame. You can prepare any graphics you like in InDesign, just reserve the space for the map. In my document I also created another buttons that use show hide actions. In my final PDF sample it serves as info-panel about Google 3D navigation.

The last thing in this step to do is to select the placeholder frame and copy the width and height of it in pixels. Copy that values and save your InDesign document.

Preparing 3D Google map API for Flash

2. To import a Google map to flash you need to download Google Map Component - map_1_18.swc.

For example, you can download it from here. In Windows 7 navigate to C:Program Files (x86)AdobeAdobe Flash CS6CommonConfigurationComponents. Then create a new folder there and name it Google. Store the .swc file there and then go to this page and follow the instruction to get the API key and save it. Your Flash is now set up to supports Google maps API.

Getting the goole api key

Getting the Google API key

Creating a new flash file

3.Start Flash CS5 or higher and create a new ActionScript3 document. Set the value of the stage to match the values of your frame in InDesign. Check if the units are the same.

Creating new document in Flash

Creating new document in Flash

Open the Components panel by pressing CTRL + F7 or click Window  →  Components in the menu. You should see the Google map library there. Drag and drop it to the Library panel.

Google maps library

Google maps library

Creating a basic Google map in ActionScript

4. Go to Layer panel in timeline and call it e.g. gmap. Open the Action panel (or Press F9) Windows  Actions. Now put there the code below to import the map:

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.Map3D;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.View;
import com.google.maps.geom.Attitude;
Import com.google

Import com.google

Create a function for the map

// Creating map variable

var map:Map3D;

Creating map variable

// Creating map
 create_map();
 function create_map()
 {
 map = new Map3D();
 map.key = "your api key";
 map.setSize(new Point(stage.stageWidth, stage.stageHeight));
 map.addEventListener(MapEvent.MAP_READY, onMapReady);
 this.addChild(map);
 }
 function onMapReady(event:MapEvent):void
 {
 map.setCenter(new LatLng(48.207401,16.372805), 13);
 map.setAttitude(new Attitude(20,30,0));
 map.viewMode = View.VIEWMODE_PERSPECTIVE;
 }

There are several values you can manipulate with:

map.setCenter(new LatLng(latitudelongitude), zoom);
map.setAttitude(new Attitude(yaw,pitch,roll));

Yaw, pitch and roll - image from api google maps for flash

Yaw, pitch and roll – image from API Google maps for Flash

Now, let’s add some control to the map. I decided to use just view mode and navigation control and uncomment the rest. You can also change view mode to 2D if you like to with (View.VIEWMODE_2D);

map.viewMode = View.VIEWMODE_PERSPECTIVE;
map.addControl(new NavigationControl());
//map.addControl(new MapTypeControl());
//map.addControl(new OverviewMapControl());

Creating custom markers

5. Let’s create some custom markers for our map locations. Go to Insert – new symbol (CTRL + F8). Name the symbol as you wish. Make sure to check up the options Export for ActionScript. Put a name for the class in the class field and press OK. Then go to File Import Import to library and select any image you like for the marker. I used owls that I created in Illustrator. The go to Library panel and drag and drop that image you imported to the center (little cross) to your symbol. Change the size of it in the properties panel to around 30px and center again if necessary. You can create more symbols if you want to have a few more markers. I have created three symbols with these class names: vienna, prague and capeTown.

Creating a symbol for a marker

Creating a symbol for a marker

Symbol for a marker

Symbol for a marker

6.In order to create the marker, you need to put some ActionScript again. Go to ActionScript panel and copy the following code. Change the classes to match yours if necessary.

var c:Marker = new Marker(new LatLng(-33.925272,18.423557),
new MarkerOptions({icon:new capeTown()}));
map.addOverlay(c);
var p:Marker = new Marker(new LatLng(50.075651,14.431229),
new MarkerOptions({icon:new prague()}));
map.addOverlay(p);
var v:Marker = new Marker(new LatLng(48.206371,16.375122),
new MarkerOptions({icon:new vienna()}));
map.addOverlay(v);}

And we’re ready to launch the map. Press CTRL + Enter to test your movie.

Testing movie with markers

Testing movie with markers

Preparing Fly to animations

7. Create a new layer in timeline panel and name it Actions. Then open the ActionScript panel and put there the following code. I have created three destinations I liked to fly to. You can put your own destinations. In case you want to create buttons in Flash, create a function similar to this one:

map.flyTo(new LatLng(48.206371,16.375122),9,new Attitude(0,30,3),5);

If you want to have control fly.to animations with acrobat buttons. Since we call ActionScript from Javascript, we use the function ExternalInterface.addCallback that will build bridge between SWF and Acrobat Javascript. Create a new action layer and put there something similar to this. It should have the same marker coordinates:

function pr(e:MouseEvent = null):void
{
map.flyTo(new LatLng(50.075651,14.431229),12,new Attitude(0,0,4),5);
 }
ExternalInterface.addCallback("pr",pr);
function vn(e:MouseEvent = null):void
{
map.flyTo(new LatLng(48.206371,16.375122),9,new Attitude(0,30,3),5);
}
ExternalInterface.addCallback("vn",vn)
function cp(e:MouseEvent = null):void
{
map.flyTo(new LatLng(-33.925272,18.423557),3,new Attitude(0,30,-10),3);
}
ExternalInterface.addCallback("cp",cp)
Preparing map-flyTo action for ExternalInterface

Preparing map-flyTo action for ExternalInterface

With map.flyTo function you can control the following parameters: LatLng, Zoom, Attitude, Time. If you know Prezi, the effect can be almost the same. In our case, we’ll do it with Google Maps. Test you map and you’re done. Now publish your map to SWF.

Importing the SWF map into InDesign

8. Now open your InDesign file again, that we have already prepared. Select the frame that will serve as placeholder for the map. With placeholder selected press CTRL + D (File – Import) to place your SWF map. Open the media panel and check Play on Page Load on. Choose None for Poster option. Now you are ready to export it to interactive PDF. Go to File – Export or CTRL + E and select Adobe PDF Interactive. 

Run a javascript in Acrobat

Run a Javascript in Acrobat

9. Open the file in Acrobat. You have your interactive Acrobat buttons and your embedded Google map there. The buttons do nothing now, except for the rollover effect if you have created any. In the Interactive tab tools choose select object tool and double click on one of the buttons. In the windows that arrive go to Actions and from Select action dropdown menu select Run a Javascript, Then Press Add. In a a new windows that open again put the following code:

getAnnotsRichMedia(this.pageNum)[0].callAS(“pr”);

Adding a javacript to Acrobat button

Adding a Javascript to Acrobat button

Press OK and close. We are calling function “pr” from Acrobat. Do the same with the other buttons, just change the function you are calling. Perfect. We’re done. Now you have trigger call map.flyTo animation with Acrobat buttons.

Hope you have enjoyed it.

[fb]

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>