Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 谷歌地图API V3自定义控件与谷歌Adsense？

Google maps api 3 谷歌地图API V3自定义控件与谷歌Adsense？

google-maps-api-3

Google maps api 3 谷歌地图API V3自定义控件与谷歌Adsense？,google-maps-api-3,adsense,Google Maps Api 3,Adsense,我对javascript非常陌生，所以请温柔一点；） 我正在使用GoogleMapsAPIv3，并根据这个示例创建一个自定义控件。这是非常直接的，因为这是谷歌的例子。但我遇到的问题是用包含javascript的现有DIV替换.innerHTML 最终，我试图在我的Google地图上创建一个包含Google Adsense广告的自定义控件。通常，我会在我的HTML中的body标记后创建一个div，该div将包含Google Adsense广告的javascript代码 通常我会使用controlT

我对javascript非常陌生，所以请温柔一点；）

我正在使用GoogleMapsAPIv3，并根据这个示例创建一个自定义控件。这是非常直接的，因为这是谷歌的例子。但我遇到的问题是用包含javascript的现有DIV替换.innerHTML

最终，我试图在我的Google地图上创建一个包含Google Adsense广告的自定义控件。通常，我会在我的HTML中的body标记后创建一个div，该div将包含Google Adsense广告的javascript代码

通常我会使用controlText.innerHTML=‘这里有一些html’；对于自定义控件，但在我的例子中，我希望使用一个现有的DIV，其中包含googleadsense广告的javascript代码

我试着换了

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>


谷歌地图JavaScript API v3示例：自定义控件
var映射；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
功能HomeControl（controlDiv、map）{
controlDiv.style.padding='4px'；
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='白色'；
controlUI.style.borderStyle='solid'；
controlUI.style.borderWidth='2px'；
controlUI.style.cursor='pointer'；
controlUI.style.textAlign='center'；
controlUI.title='单击以将地图设置为主页'；
controlDiv.appendChild（controlUI）；
var controlText=document.createElement（'div'）；
controlText.style.fontFamily='Arial，无衬线'；
controlText.style.fontSize='12px'；
controlText.style.paddingLeft='4px'；
controlText.style.paddingRight='4px'；
//**********************************************************************//
//通常这将是controlText.innerHTML='一些html在这里'；
//**********************************************************************//
controlText.innerHTML=document.getElementById（“verticalad”）；
controlUI.appendChild（controlText）；
google.maps.event.addDomListener（controlUI，'click'，function（）{
赛特中心地图（芝加哥）
});
}
函数初始化（）{
var mapDiv=document.getElementById（'map_canvas'）；
变量映射选项={
缩放：12，
中心：芝加哥，
mapTypeId:google.maps.mapTypeId.TERRAIN，
街景控制：错误，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单，
位置：google.maps.ControlPosition.RIGHT\u底部
}
}
map=新的google.maps.map（mapDiv，mapOptions）；
var homeControlDiv=document.createElement（'div'）；
var homeControl=新的homeControl（homeControlDiv，map）；
homeControlDiv.index=1；
控件[google.maps.ControlPosition.LEFT_CENTER].push（homeControlDiv）；
}
//****************************************************************
//这是需要在自定义控件中的div
//****************************************************************
adsense代码在这里
要将整个verticalad div移动到控件中，还是只移动verticalad的内容？ 如果要移动它，请使用
appendChild
而不是
innerHTML

controlText.appendChild(document.getElementById("verticalad"));
如果您需要内容，请使用verticalad的innerHTML

controlText.innerHTML = document.getElementById("verticalad").innerHTML;
我想我在某个地方少了一个分号，因为我已经设法让它工作了

我确实将Adsense代码完整地保存在HTML主体的一个div中，然后使用controlText.innerHTML=document.getElementById（“verticalad”）.innerHTML

我确实还有一个问题，adsense广告没有出现在IE中，但我添加了一个元标签，迫使它模仿IE7，现在它工作正常。。这不是我知道的最好的解决方案，但IE7很好用。我认为该网站现在在所有现代浏览器中都应该看起来不错

如果有人有兴趣参观最终的网站，请点击

谢谢你的帮助

杰夫

这将是内容。。verticalad div中有一些javascript代码。。我需要能够在控件内执行javascript代码。顺便说一句，当使用上述任何一种方法时，它都不起作用。。它根本不加载地图。嗯。。好啊当我使用一个看起来像document.write（“asdfasdf”）的div时，它似乎工作正常。。但是当我使用一个看起来像这样的div时，它失败了。。在我看来，.innerHTML正在解释一个不应该是的字符。。我只是不知道如何修复它。在进一步检查时，似乎发生的是innerHTML没有执行javascript。。它只是在打印。如果我有下面这句话。它将打印show_ads.js的内容，而不是执行它。有人知道我如何让它实际执行吗？试着在show_广告脚本中添加一个协议。或者使用这个巧妙的技巧： 
controlText.innerHTML = document.getElementById("verticalad").innerHTML;