帶Google Adsense的Google Maps API V3自定義控件？

我對JavaScript很新，所以請保持溫柔;）帶Google Adsense的Google Maps API V3自定義控件？

我使用Google Maps API V3並按照此示例創建了自定義控件。這非常簡單，因爲它就是Google的例子。我遇到的麻煩是用包含javascript的現有DIV替換.innerHTML。

最終，我試圖在包含Google Adsense廣告的Google地圖上創建自定義控件。通常情況下，我會在body標記後的HTML中創建一個div，其中包含Google Adsense廣告的JavaScript代碼。

通常我會使用controlText.innerHTML ='一些html在這裏';對於自定義控件，但在我的情況下，我想使用包含Google Adsense廣告的JavaScript代碼的現有DIV。

我試着

controlText.innerHTML = document.getElementById("verticalad");

更換

controlText.innerHTML = 'some html goes here';

，但它只是打破了地圖。任何人都可以提出我做錯了什麼？我希望這是非常簡單的修復。

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Custom Controls</title> 
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script> 

    var map; 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    function HomeControl(controlDiv, map) { 

    controlDiv.style.padding = '4px'; 

    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); 

    var controlText = document.createElement('div'); 
    controlText.style.fontFamily = 'Arial,sans-serif'; 
    controlText.style.fontSize = '12px'; 
    controlText.style.paddingLeft = '4px'; 
    controlText.style.paddingRight = '4px'; 

    //**********************************************************************// 
    //Normally this would be controlText.innerHTML = 'some html goes here'; 
    //**********************************************************************// 
    controlText.innerHTML = document.getElementById("verticalad"); 

    controlUI.appendChild(controlText); 

    google.maps.event.addDomListener(controlUI, 'click', function() { 
    map.setCenter(chicago) 
    }); 

    } 

    function initialize() { 
    var mapDiv = document.getElementById('map_canvas'); 
    var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    streetViewControl: false, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 

    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
    position: google.maps.ControlPosition.RIGHT_BOTTOM 

    } 

    } 
    map = new google.maps.Map(mapDiv, mapOptions); 

    var homeControlDiv = document.createElement('div'); 
    var homeControl = new HomeControl(homeControlDiv, map); 

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

    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%;height:700px;"></div> 

    //**************************************************************** 
    // This is the div that needs to be in the custom control 
    //**************************************************************** 
    <div id="verticalad"><script type="text/javascript">adsense code goes here</script></div> 
    </body> 
    </html>

來源

2012-07-25 gleff

你想在移動整個verticalad div來控制或verticalad的僅僅是內容？如果要移動它，使用appendChild代替innerHTML

controlText.appendChild(document.getElementById("verticalad"));

如果你想要的內容，使用verticalad

controlText.innerHTML = document.getElementById("verticalad").innerHTML;

來源

2012-07-25 13:50:47 puckhead

這將是內容..例如。在verticalad div裏面是一些javascript代碼..我需要能夠在控件內部執行那個javascript代碼。令人遺憾的是，當使用上述任何一種方法時，它都不起作用。它根本不加載地圖。 – gleff 2012-07-25 13:57:14

嗯..好吧..它似乎工作正常，當我使用一個div看起來像

..但是，當我使用一個看起來像這樣的div它失敗..

– gleff 2012-07-25 14:10:27

它看起來像.innerHTML解釋一個性格它不應該..我只是不知道如何解決它。 – gleff 2012-07-25 14:34:52

的innerHTML的，我認爲我有一個缺少分號的地方，因爲我設法得到這個工作..

我確實保持Adsense代碼在HTML的正文div中完整，然後使用controlText.innerHTML = document.getElementById（「verticalad」）。innerHTML;

我還有一個問題，adsense廣告不會在IE中顯示，但我把一個元標籤迫使它模仿IE7，它現在工作正常..不是我知道的最好的解決方案，但IE7工作正常。我認爲該網站現在在所有現代瀏覽器中都應該看起來不錯。

如果有人有興趣看到最終的網站，它在http://www.flighttracker.gleff.com。

謝謝你的幫助。

傑夫

來源

2012-08-01 13:23:29 gleff

帶Google Adsense的Google Maps API V3自定義控件？

回答

相關問題