MapBridge Examples

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.

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