我对javascript很新,所以请保持温和;)
我正在使用Google Maps API V3并根据此示例创建自定义控件。这是非常直接的,因为它是谷歌的例子。我遇到的问题是将.innerHTML替换为包含javascript的现有DIV。
最终,我正在尝试在我的Google地图上创建一个包含Google Adsense广告的自定义控件。通常我会在body标签后面的HTML中创建一个div,其中包含Google Adsense Ad的javascript代码。
通常我会使用controlText.innerHTML ='有些html会在这里';对于自定义控件,但在我的情况下,我想使用包含Google Adsense广告的javascript代码的现有DIV。
我试过替换
controlText.innerHTML = 'some html goes here';
与
controlText.innerHTML = document.getElementById("verticalad");
但它只是打破了地图。任何人都可以建议我做错了吗?我希望能很好地解决这个问题。
<!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>
答案 0 :(得分:0)
您想将整个verticalad div移动到控件中还是只移动verticalad的内容?
如果您想移动它,请使用appendChild
代替innerHTML
controlText.appendChild(document.getElementById("verticalad"));
如果你想要内容,请使用verticalad的innerHTML
controlText.innerHTML = document.getElementById("verticalad").innerHTML;
答案 1 :(得分:0)
我想我在某个地方丢失了分号,因为我已经设法让这个工作了......
我确实将Adsense代码保留在HTML正文中的div中,然后使用controlText.innerHTML = document.getElementById(“verticalad”)。innerHTML;
我还有一个问题,即adsense广告没有出现在IE浏览器中,但是我放了一个元标记,强制它模仿IE7,它现在工作正常..不是我知道的最好的解决方案,但IE7工作正常。我认为该网站现在在所有现代浏览器中看起来都不错。
如果有人有兴趣看到最终网站,那就是http://www.flighttracker.gleff.com。
感谢你的帮助。
杰夫