Monday, August 31, 2009

New Library Creates JavaScript Bridge to Google Maps API for Flash

Hi,I am Nianwei Liu, a web developer located in Charlotte, North Carolina that enjoy workings with various flavors of theGoogle Maps APIs.

A few weeks ago, Google announced 3D/perspective capability in the Flash API. If you would like to try out this functionality, but you're not ready to fully commit to AS3 yet, you may find this open source library helpful: Map Bridge.

The concept is very simple: programing a flash component with JavaScript, similar to what you do with GStreetViewPanorama. This library exposes all core classes in the Flash API and packages them in an easy to use way. You can write a simple Map3D application like this:

 
var map;
function init() {
  MapBridge.createMap(document.getElementById('map_canvas'), function(mp, brg) {
    map = mp;
    map.addEventListener('mapevent_mappreinitialize', onMapPreinitialize);
    map.addEventListener('mapevent_mapready', onMapReady);
  });
}
            
function onMapPreinitialize(e) {
  var myMapOptions = new MapOptions({
    zoom: 12,
    center: new LatLng(40.756054, -73.986951),
    mapType: MapType.NORMAL_MAP_TYPE(),
    viewMode: View.VIEWMODE_PERSPECTIVE(),
    attitude: new Attitude(20, 30, 0)
  });
  map.setInitOptions(myMapOptions);
}
            
function onMapReady(e) {
  map.enableContinuousZoom();
  map.enableScrollWheelZoom();
  map.addControl(new NavigationControl());
  map.addControl(new MapTypeControl());
}
       

Here is an example that uses Map3D and driving directions for a fly-over.

For more information, check out more examples, how-to, and reference.