Google Maps AdSense Library - Responsive Ads

Question

I have a responsive web map site that is targeted at both mobile devices and desktops.

I'm using the Google Maps AdSense Library to serve up ads but it doesn't have any built-in responsive solutions for serving up different ad unit sizes based on screen resolution.

Has anyone come up with an elegant solution for making the AdSense Library responsive? At least based on the browser window size when the site is first loaded.

score 0 · Accepted Answer · answered May 04 '15 at 09:01

A very simple solution using 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.
}

Google Maps AdSense Library - Responsive Ads

1 Answers1