Articles

use google maps in your adobe captivate projects…

In adobe, adobe captivate, adobe captivate new feature, collaborative elearning content creation, e learning, flash, technology on March 7, 2009 by rajeev kumar

gmapshybrid1

there are many eLearning projects with addresses and contact information. How would that look if we can insert a live map which will show a note about the address , can show directions to reach and user can pan,zoom and use it as he would do in any online map services and all within the Captivate project. No need to go to the browser and break the flow of users.

in this post we will go through some of the resources to use Adobe Flash CS4 to create a swf file which can be used inside adobe captivate projects. We will use Google maps Api to achieve this.

  1. Set up your development environment in Flash CS4. Read the whole process here.
  2. Sign up for google map API here. You will get a unique API key. You will need to specify a website or domain where you will be using it. You can give the link to your blogs also. Refer to step 10 as to how to use it.
  3. go through this post to create a simple application here. Note – The path for componets in Flash CS4 is C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components
  4. Now we will create a swf file which will display the map of washington and show a overlay over that.
  5. Open Flash CS4. Create a Action Script 3.0 project
  6. During step number 1 you have copied maps swc file to Flash directory. If you have done it correctly than inside components window you can see and entry for “Google>GoogleMapsLibrary”. Drag drop it to stage. Dont worry about the position.
  7. The code is attached at the end of post for reference. Just copy the code to actionscript window and publish the project as swf file.
  8. In the begining of code we have use few import statements so that we can use the corresponding APIs.
  9. We will declare the map object – var map:Map = new Map();
  10. We will need to use the API key we generated in step 2. – map.key = “put the api key here“;
  11. Set the size of map – map.setSize(new Point(500, 400));
  12. add a event listener – map.addEventListener(MapEvent.MAP_READY, onMapReady);
  13. set the map area to the location you want to show – map.setCenter(new LatLng(38.8977, -77.0366), 14, MapType.NORMAL_MAP_TYPE); – Important thing are lattitude(38.8977) and longitude(-77.0366) – how should you find the one for your location – there are 3 ways – you know it already, use google geocoding apis  or use this page to find the one for your location. Behind the scenes it is using google map apis to do this.
  14. Play with replacing MapType.NORMAL_MAP_TYPE – Other values they can take are SATELLITE_MAP_TYPE, HYBRID_MAP_TYPE, and PHYSICAL_MAP_TYPE. SATELLITE_MAP_TYPE is the one you can use to get google earth type of map.
  15. Next we will create a marker and add it over the map. It will show your position on map
  16. Below is the action script code . Put it in your action script window and you are ready to go.

import com.google.maps.LatLng;

import com.google.maps.Map;

import com.google.maps.MapEvent;

import com.google.maps.MapType;

import com.google.maps.overlays.Marker;

import com.google.maps.overlays.MarkerOptions;

import com.google.maps.MapType;

import com.google.maps.LatLng;

import com.google.maps.styles.FillStyle;

import com.google.maps.styles.StrokeStyle;

//create a map object

var map:Map = new Map();

//specify the API key

map.key = “replace with your API key“;

//set the size of map

map.setSize(new Point(500, 400));

//add event listeners

map.addEventListener(MapEvent.MAP_READY, onMapReady);

this.addChild(map);

function onMapReady(event:Event):void {

//center the map to the lat, long

map.setCenter(new LatLng(38.8977, -77.0366), 14, MapType.NORMAL_MAP_TYPE);

//create a marker

         var markerA:Marker = new Marker(

             new LatLng(38.8977, -77.0366),

             new MarkerOptions({

                 strokeStyle: new StrokeStyle({color: 0x987654}),

                 fillStyle: new FillStyle({color: 0x223344, alpha: 1}),

                 radius: 15,

                 hasShadow: true

             })

         );

//add the marker to the map

map.addOverlay(markerA);

}

Publish it as swf and insert it to your Captivate project. Note – This is action script 3.0 swf so you can use it in Latest version of Adobe Captivate that is 4 . Publish the Captivate project. You have a fully functional map showing the location you provided. You can pan , go to any place in world . Find the directions etc. 

Keep an eye here for the future post to understand how widget feature of Adobe Captivate 4 gives a better solution than this. And use the endless capabilities of Google Maps service.

Update  – read this post to see how the google map widgets were created and download the file to be used with Adobe Captivate 4.

Advertisements

4 Responses to “use google maps in your adobe captivate projects…”

  1. […] Excerpt from:  use google maps in your adobe captivate projects… « rajeev kumar b…/b […]

  2. nice subject , search this from blogsearch after that good luck for you.just tally up the rss feed toward my reader,keep bring up to date!

  3. Interesting blog heaps of information here. Keep up good work. Thank you

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

%d bloggers like this: