Google 地图 AdSense 库 - 自适应广告

Posted 2023-03-06

【中文标题】Google 地图 AdSense 库 - 自适应广告

【英文标题】：Google Maps AdSense Library - Responsive Ads

【发布时间】：2015-07-13 14:05:14

【问题描述】：

我有一个针对移动设备和台式机的响应式 Web 地图站点。

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

有没有人想出一个优雅的解决方案来使 AdSense 库具有响应性？至少基于首次加载网站时的浏览器窗口大小。

【参考方案1】：

使用 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.