在Google Maps API v3上添加多个自定义控制按钮

Question

我在同一页面上有2张Google地图，我希望将相同的按钮添加到已有的地图中。 此按钮用于关闭Google地图启动的叠加层，基本上是退出按钮。

按钮在第一张地图上正常工作但我不能让第二张工作D：！ 我知道我必须更改变量，因为这是我必须要做的才能在一个页面上获得2个地图。此外，如果其他人擅长使用Google Maps API v3，您能告诉我为什么我需要function HomeControl(controlDiv, map) {行中的“map”变量吗？ 这是我的代码：

function HomeControl(controlDiv, map) {

      // Set CSS styles for the DIV containing the control
      // Setting padding to 5 px will offset the control
      // from the edge of the map.
      controlDiv.style.padding = '5px';

      // Set CSS for the control border.
      var controlUI = document.createElement('div');
      controlUI.style.backgroundColor = 'white';
      controlUI.style.borderStyle = 'solid';
      controlUI.style.borderWidth = '2px';
      controlUI.style.cursor = 'pointer';
      controlUI.style.textAlign = 'center';
      controlUI.title = 'Click to set the map to Home';
      controlDiv.appendChild(controlUI);

      // Set CSS for the control interior.
      var controlText = document.createElement('div');
      controlText.style.fontFamily = 'Arial,sans-serif';
      controlText.style.fontSize = '12px';
      controlText.style.paddingLeft = '4px';
      controlText.style.paddingRight = '4px';
      controlText.innerHTML = '<strong>Home</strong>';
      controlUI.appendChild(controlText);

      // Setup the click event listeners: simply set the map to Chicago.
      google.maps.event.addDomListener(controlUI, 'click', function() {
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none';
      });
    }

        function detectBrowser() {
        var useragent = navigator.userAgent;
        var mapdivMap = document.getElementById("light");

        if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
            mapdivMap.style.width = '100%';
            mapdivMap.style.height = '100%';
            initialize();
        } else {
            mapdivMap.style.width = '600px';
            mapdivMap.style.height = '100%';
            initialize();
            }
        };

        function initialize() {
            var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(43.464258,-80.52041),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('light'),
                mapOptions);

            var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                title: 'Waterloo'
            });


      // Create the DIV to hold the control and call the HomeControl() constructor
      // passing in this DIV.
      var homeControlDiv = document.createElement('div');
      var homeControl = new HomeControl(homeControlDiv, map);

      homeControlDiv.index = 1;
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

        }



        //*******************************************************
        //************ Conestoga Map Page JavaScript ************ 
        //*******************************************************

        function Map2(Map2Div, map2) {

      // Set CSS styles for the DIV containing the control
      // Setting padding to 5 px will offset the control
      // from the edge of the map.
      Map2Div.style.padding = '5px';

      // Set CSS for the control border.
      var Map2UI = document.createElement('div');
      Map2UI.style.backgroundColor = 'white';
      Map2UI.style.borderStyle = 'solid';
      Map2UI.style.borderWidth = '2px';
      Map2lUI.style.cursor = 'pointer';
      Map2UI.style.textAlign = 'center';
      Map2UI.title = 'Click to set the map to Home';
      Map2Div.appendChild(Map2UI);

      // Set CSS for the control interior.
      var Map2Text = document.createElement('div');
      Map2Text.style.fontFamily = 'Arial,sans-serif';
      Map2Text.style.fontSize = '12px';
      Map2Text.style.paddingLeft = '4px';
      Map2Text.style.paddingRight = '4px';
      Map2Text.innerHTML = '<strong>Home</strong>';
      Map2UI.appendChild(Map2Text);

      // Setup the click event listeners: simply set the map to Chicago.
      google.maps.event.addDomListener(MapUI2, 'click', function() {
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none';
      });
    }


        function detectBrowser2() {
        var useragent2 = navigator.userAgent;
        var mapdivMap2 = document.getElementById("light");

        if (useragent2.indexOf('iPhone') != -1 || useragent2.indexOf('Android') != -1 ) {
            mapdivMap2.style.width = '100%';
            mapdivMap2.style.height = '100%';
            initialize2();
        } else {
            mapdivMap2.style.width = '600px';
            mapdivMap2.style.height = '100%';
            initialize2();
            }
        };

        function initialize2() {
            var mapOptions2 = {
            zoom: 8,
            center: new google.maps.LatLng(43.464258,-80.52041),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map2 = new google.maps.Map(document.getElementById('light'),
                mapOptions2);

            var marker2 = new google.maps.Marker({
                position: map.getCenter(),
                map: map2,
                title: 'Waterloo'
            });


      // Create the DIV to hold the control and call the HomeControl() constructor
      // passing in this DIV.
       var Map2Div = document.createElement('div');
       var Map2 = new Map2(Map2Div, map2);

      Map2Div.index = 1;
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(Map2Div);
        }