MapBridge Examples

Map Bridge API Reference | Google Maps API for Flash Reference

This library provides a JavaScript proxy library to Google Maps API for Flash using Adobe's FABridge and project SWFObject. It basically allow you to write Flash Map application using JavaScript. You will be using the Flash API's documentation, not GMap2. However, they are very similar in many aspects.

How to Use

Refer to the how-to page for details. Basically, create a map instance from div, get reference from a callback function, and start using the map class. All other classes can be created use the "new" statement.

Examples

Directions Fly to

Modeled off the "DirectionsAdvanced" example in Flash API. Get driving direction, then fly to destination after click fly to.

             var map;
            var dir;
            function init() {
              MapBridge.createMap(document.getElementById('map_canvas'), function(mp) {
                map = mp;
                map.addEventListener(MapEvent.MAP_PREINITIALIZE(), onMapPreinitialize);
                map.addEventListener(MapEvent.MAP_READY(), onMapReady);
                map.addEventListener(MapEvent.FLY_TO_DONE(), flyToNext);
                ..
              });
            }
                  
            function onMapReady(e) {
             ...
             dir = new Directions();
             dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS(), onDirLoad);
             dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE(), onDirFail);
            }
            
            
            function onDirLoad(e) {
              dir = e.getDirections();
              route = dir.getRoute(0);
              ... 
            }
            
            function flyToNext() {
             ..
                var step = route.getStep(turnCounter - 1);
                var latlng = step.getLatLng();
                var nextLatlng = null;
               ...
                var angle = computeAngle(nextLatlng, latlng);
                if (!turning) {
             ...    map.flyTo(latlng, z, new Attitude(angle, a.getPitch(), a.getRoll()), 2);
                } else {
              ...   map.flyTo(nextLatlng, z, new Attitude(angle, a.getPitch(), a.getRoll()), ep);
                }
              ...
              }
            }
    

View DirectionsFlyTo.html

Street View Sync with Map3D

Synchronze with Street View in AJAX API. When Street view rotates, so does Map3D and vise versa.

            var map;
            var pano;
          ...
            function init() {
              MapBridge.createMap(document.getElementById('map_canvas'), function(mp) {
                map = mp;
                map.addEventListener('mapevent_mappreinitialize', onMapPreinitialize);
                map.addEventListener('mapevent_mapready', onMapReady);
              });
            }
             function onMapReady(e) {
              ...
              map.addEventListener('mapevent_attitudechangeend', syncPanoToMap);
              map.addEventListener('mapevent_moveend', syncPanoToMap);
              ... 
              marker.addEventListener('mapevent_overlaymoved', syncPanoToMap);
            }
            
            function initPano() {
              ...pano = new GStreetviewPanorama(pnode, {
                latlng: new GLatLng(c.lat(), c.lng()),
                pov: {
                  yaw: a.getYaw(),
                  pitch: getPanoPitch(a.getPitch())
                }
              });
              GEvent.addListener(pano, 'yawchanged', syncMapToPano);
              GEvent.addListener(pano, 'pitchchanged', syncMapToPano);
              ...   
            }
            
    

View StreetViewMap3D.html

Two Maps

Create two maps instances. Note all functionc call must carry the its corresponding map instance.

        var map1;
            var map2;
            function init() {
              MapBridge.createMap(document.getElementById('map1'), function(m) {
                map1 = m;
                map1.addEventListener('mapevent_mappreinitialize', onMapPreinitialize1);
              });
              MapBridge.createMap(document.getElementById('map2'), function(m) {
                map2 = m;
                map2.addEventListener('mapevent_mappreinitialize', onMapPreinitialize2);
              });
            }
            
            function onMapPreinitialize1(e) {
              map1.setInitOptions(new MapOptions(map1, {
                viewMode: View.VIEWMODE_PERSPECTIVE(map1),
                zoom: 5,
                center: new LatLng(map1, -29.3, 149.6),
                attitude: new Attitude(map1, -53, 46, 0),
                mapType: MapType.HYBRID_MAP_TYPE(map1)
              }));
            }
            
            function onMapPreinitialize2(e) {
              map2.setInitOptions(new MapOptions(map2, {
                viewMode: View.VIEWMODE_2D(map2),
                zoom: 5,
                center: new LatLng(map2, 35, -84),
                attitude: new Attitude(map2, -53, 46, 0),
                mapType: MapType.NORMAL_MAP_TYPE(map2)
              }));
            }
    

View MultiMap.html

Original Flash Example Written in JavaScript

The following are JavaScript version of the original Flash API examples.

Basic Examples

Event Examples

Control Examples

Overlay Examples

Service Examples

Map3D Examples