How To

/**
Declare variables needed in this code
*/

    var map = null;
    var pano = null;  
    var menu = null;

    var _DLAT = 33.029125000000; // latitude
    var _DLNG = -117.287231000000; // longitude
    var _DNAME = "main_map"; // map div ID
   
/**
- declare new object ta (namespace)
- adding a new method to ta which initialize a menu and return the code for menu
**/

    ta = {};                        
    ta.addMapType = function (d, sf) {
        var b = d.init(sf);
        return b.c;
    }
/**
- declare new object type MyMapType representing the menu
*/    
    ta.MyMapType = function () {
       
/**
- init method creates a div with four links
- adding listener to each button (this.listen)
- if sf is 0 then we activate Map button on first load (this.activeLink(this.c, this.map);)
*/
 
        this.init = function (sf) {
            this.c = document.createElement('DIV');  
            this.c.className = 'mycontrol';      
            this.map = document.createElement('A');
            this.map.className = this.map.id =  'map';
            this.map.innerHTML = 'Map';
            this.listen([this.map, this.c, google.maps.MapTypeId.ROADMAP,'map']);
            this.c.appendChild(this.map);

            this.street = document.createElement('A');
            this.street.className = this.street.id = 'street';
            this.street.innerHTML = 'Street';            
            this.listen([this.street, this.c, 0,'street']);
            this.c.appendChild(this.street);

            this.satellite = document.createElement('A');
            this.satellite.className = this.satellite.id = 'satellite';
            this.satellite.innerHTML = 'Satellite';
            this.listen([this.satellite, this.c, google.maps.MapTypeId.SATELLITE,'satellite']);
            this.c.appendChild(this.satellite);
           
            this.hybrid = document.createElement('A');
            this.hybrid.className = this.hybrid.id = 'hybrid';
            this.hybrid.innerHTML = 'Hybrid';            
            this.listen([this.hybrid, this.c, google.maps.MapTypeId.HYBRID,'hybrid']);
            this.c.appendChild(this.hybrid);
                       
            if (!sf) this.activeLink(this.c, this.map);
           
            return this;    
        }
     
/**
- set active link (hover)
- co represents menu div
- d represents link name we want to make it active
*/
 
        this.activeLink = function(co, d){
            var b,c;            
            b = co.getElementsByTagName('A');
            for(c=0; c < b.length; c++){
                b[c].className = b[c].id;
            }            
            d.className = d.id + '_hover';            
        };
 
/**
- add a DOM listener to each link
- dt is an array with link object, menu object, google map type, and link name
*/
       
        this.listen = function (dt) {
            var e = this;                                  
                                   
            google.maps.event.addDomListener(dt[0], 'click', function(){                              
             
// if object isn't street link, then
// - make street panorama not visible,
// - set map type
// - set active link
   
                if (dt[3] != 'street') {
                   
                    pano.setVisible(false);
                    map.setMapTypeId(dt[2]);                                
                    e.activeLink(dt[1], dt[0]);
                   
                } else {                          
// else make pano visible                    
                    pano.setVisible(true);  
                   
                }                
               
            });                                
        }
    }
// initialize google map    
    function init() {
// making a new googla map latLng object using _DLAT, _DLNG
// _DLAT, _DLNG are defined at the beginning of the script        
        var point_0 = new google.maps.LatLng(_DLAT, _DLNG);
// map options        
        var myOptions = {
            zoom: 16,
            center: point_0,                    
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControl: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                            google.maps.MapTypeId.SATELLITE,
                            google.maps.MapTypeId.HYBRID]
            },
            streetViewControl: true
        }
// make a new map object
// adding a new marker with custom icon
        map = new google.maps.Map(document.getElementById(_DNAME), myOptions);
        var marker = new google.maps.Marker({
            position: point_0,
            map: map,
            icon: 'http://images.joover.com/icons/home6.png'
        });

        var panoramaOptions = {
          position: point_0,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
          }
        };
// making a new streetPanorama object        
        pano = new google.maps.StreetViewPanorama(document.getElementById(_DNAME),
                                                        panoramaOptions);                
        menu = new ta.MyMapType;
       
// adding the menu to pano
           pano.controls[google.maps.ControlPosition.TOP_RIGHT].push(ta.addMapType(menu, 1));        
// adding the menu to map          

 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ta.addMapType(menu, 0));
// because I use same container for both panorama and map
// I check for for visible_changed event on pano object
        google.maps.event.addListener(pano, 'visible_changed', function(ev){
// if street is visible, make street link active,
// remove last control, add new control div
            if (this.getVisible()) {
                menu.activeLink(menu.c, menu.street);
                pano.controls[google.maps.ControlPosition.TOP_RIGHT].pop();                                
                pano.controls[google.maps.ControlPosition.TOP_RIGHT].push(menu.c);        
            } else {                
                map.controls[google.maps.ControlPosition.TOP_RIGHT].pop();
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(menu.c);      
            }
        });                
        // default settings
        pano.setVisible(false);              
        map.setStreetView(pano);                        
       
   
    }
    // we call init on onload
    window.onload = init;