MapBridge How-To

How to Use

•  Include Library. The first step is to include mapbridge.js or mapbridge_packed.js in your document header. Download the scripts's src folder's all files and put it on your site and reference them in your site.
  Make sure to include your API key in the parameter. It will be passed to the Flash API.

        <script src="/path/to/mapbridge_packed.js?key=your_gmaps_api_key" type="text/javascript"></script>
      

• Create Map Instance. Use MapBridge.createMap static method to create a map instance. Get reference to the map from the callback function's first parameter.

      var map;
      function init(){
        MapBridge.createMap(document.getElementById('map_canvas'), function(m){
          map = m;
          // start working with map
        }
      }
    

• Events. Use obj.addEventListener(eventName, function(e){}) to handle events, and the actual event will be passed into the handler function. , and an event object is passed in handler instead of individual values.  Refer to AS3 API docs for details about what object can trigger what event, and what property is available in events.
  Important: Make sure the handler function's signature contains the event parameter

      map.addEventListener('mapevent_mappreinitialize', function(evt){
       //work on evt object's properties
       ...
      });      
    

• Object Creation. Most classes can be created with the same syntax as in the Flash API . The map instance also have a generic 'create' method that can be used to create other objects in the core flash API. If you need additional class, compile a new swf and pass it in the MapBridge.createMap method.

              var latlng = new LatLng(23, 45);    
              var timer = map.create('flash.utils.Timer',[1000,1]);
      

• Object Properties. Always use getter/setter method to access properties. See FABridge docs for more info.

      var attitude = map.getAttitude();
      var pitch = attitude.getPitch(); // not attitude.pitch;   
      attribute.setYaw(40);// not attitude.yaw = 40; 
      

• Static/Constants. For Class static variable/constants that is a class instance instead of a primitive type, access them via function CONSTANT_NAME().  For those constants in primitive types (int, string etc), you can also directly use the value according to AS3 API documentation. 

          map.setMapType(MapType.HYBRID_MAP_TYPE()); // not MapType.HYBRID_MAP_TYPE;    
         map.addListener('mapevent_mapready', function (e){});
         // or 
         map.addListener(MapEvent.MAP_READY(), function (e){});
         
   

• Instance Context. All objects must reside in a flash context. Once the first  map is created, it will be used as default context. However, if there are more than one map on the same page, all classes must be constructed with it's map instance as first parameter in constructor. Pass map instance in the function to get static constants too. Objects can not be shared among map instances.

       var latlng1 = new LatLng(map1, 35, -80);
      var latlng2 = new LatLng(map2, 35, -80);
      map1.setMapType(MapType.HYBRID_MAP_TYPE(map1));    
    

• Extending Core Classes. It's not possible to extend core classes in JS. They must be extended in ActionScript, compiled with the MapBridge.as, then pass the result swf URL in MapBridge.createMap(node, callback, opts) .
• Domain Security Restriction. Dynamic resource (bitmap etc) should be from the same domain of the swf file. If you need to load from remote server, either use a server proxy or gain permission via remote server's crossdomain.xml.