Google Maps AdSense库 - 自适应广告

时间:2015-05-04 08:37:21

标签: javascript google-maps-api-3 responsive-design adsense

我有一个针对移动设备和桌面的响应式网络地图网站。

我正在使用Google Maps AdSense Library来投放广告,但它没有任何内置的响应式解决方案,可根据屏幕分辨率提供不同的广告单元尺寸。

有没有人想出一个优雅的解决方案来让AdSense图书馆做出响应?至少基于首次加载网站时的浏览器窗口大小。

1 个答案:

答案 0 :(得分:0)

使用jQuery的一个非常简单的解决方案:

var adFormat = google.maps.adsense.AdFormat.BANNER;
if ($(window).width() < 480) adFormat = google.maps.adsense.AdFormat.HALF_BANNER;

try { // Needed as AbBlocker will cause site to fail
    var adUnitDiv = document.createElement('div');
    var adUnitOptions = {
        format: adFormat,
        position: google.maps.ControlPosition.BOTTOM_CENTER,
        map: map,
        visible: true,
        publisherId: 'ca-pub-XXXXXXXXXXX'
    }
    var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
}
catch (error) {
    // Do nothing, error probably caused by an ad blocker.
}