javascript - Google Maps API v3 に複数のカスタム コントロール ボタンを追加する

Question

同じページに 2 つの Google マップがあり、既に 1 つあるマップに同じボタンを追加しようとしています。このボタンは、Google マップが起動するオーバーレイを閉じるためのもので、基本的には終了ボタンです。

ボタンは最初のマップでは正常に機能しますが、2 番目のマップでは機能しません D:! 1 ページに 2 つのマップを表示するために変数を変更する必要があることはわかっています。また、他の誰かが Google Maps API v3 に精通している場合、function HomeControl(controlDiv, 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);
        }