Map Ad Unit formats

View this example full screen.

JavaScript

var adUnit;

var SAMPLE_AD_STYLES = {
  'default': {
    'color_bg': '#c4d4f3',
    'color_border': '#e5ecf9',
    'color_link': '#0000cc',
    'color_text': '#000000',
    'color_url': '#009900',
  },
  'modern': {
    'color_bg': '#ffffff',
    'color_border': '#000000',
    'color_link': '#1155cc',
    'color_text': '#000000',
    'color_url': '#009900',
  },
  'plain': {
    'color_bg': '#f5f5f5',
    'color_border': '#cccccc',
    'color_link': '#1155cc',
    'color_text': '#333333',
    'color_url': '#009900',
  },
  'kennedy': {
    'color_bg': '#f1f1f1',
    'color_border': '#dd4b39',
    'color_link': '#4d90fe',
    'color_text': '#222222',
    'color_url': '#3d9400',
  },
  'flamingo': {
    'color_bg': '#feeeff',
    'color_border': '#d1d1ed',
    'color_link': '#5577ee',
    'color_text': '#000000',
    'color_url': '#44bbbb',
  },
  'monochrome': {
    'color_bg': '#eeeeee',
    'color_border': '#666666',
    'color_link': '#333333',
    'color_text': '#666666',
    'color_url': '#999999',
  },
  'barbecue': {
    'color_bg': '#666666',
    'color_border': '#555555',
    'color_link': '#ffcc00',
    'color_text': '#808080',
    'color_url': '#e8ab00',
  },
  'miami': {
    'color_bg': '#d6f8ff',
    'color_border': '#89d1ff',
    'color_link': '#3b8aeb',
    'color_text': '#333333',
    'color_url': '#53be05',
  },
  'shamrock': {
    'color_bg': '#f5ffe9',
    'color_border': '#449944',
    'color_link': '#009900',
    'color_text': '#596659',
    'color_url': '#779977',
  }
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(36.5987, -121.8950),
    zoom: 12
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var adUnitDiv = document.createElement('div');
  var adUnitOptions = {
    format: google.maps.adsense.AdFormat.HALF_BANNER,
    position: google.maps.ControlPosition.TOP_CENTER,
    backgroundColor: '#c4d4f3',
    borderColor: '#e5ecf9',
    titleColor: '#0000cc',
    textColor: '#000000',
    urlColor: '#009900',
    publisherId: 'ca-google-maps_apidocs',
    map: map,
    visible: true
  };
  var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

  var format = document.getElementById('format');
  google.maps.event.addDomListener(format, 'change', function() {
    adUnit.setFormat(google.maps.adsense.AdFormat[this.value]);
  });

  var style = document.getElementById('style');
  google.maps.event.addDomListener(style, 'change', function() {
    var adStyle = SAMPLE_AD_STYLES[this.value];
    adUnit.setBackgroundColor(adStyle['color_bg']);
    adUnit.setBorderColor(adStyle['color_border']);
    adUnit.setTitleColor(adStyle['color_link']);
    adUnit.setTextColor(adStyle['color_text']);
    adUnit.setUrlColor(adStyle['color_url']);
  });

  var position = document.getElementById('position');
  google.maps.event.addDomListener(position, 'change', function() {
    adUnit.setPosition(google.maps.ControlPosition[this.value]);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

JavaScript + HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Map Ad Unit formats</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=adsense"></script>
    <script>
var adUnit;

var SAMPLE_AD_STYLES = {
  'default': {
    'color_bg': '#c4d4f3',
    'color_border': '#e5ecf9',
    'color_link': '#0000cc',
    'color_text': '#000000',
    'color_url': '#009900',
  },
  'modern': {
    'color_bg': '#ffffff',
    'color_border': '#000000',
    'color_link': '#1155cc',
    'color_text': '#000000',
    'color_url': '#009900',
  },
  'plain': {
    'color_bg': '#f5f5f5',
    'color_border': '#cccccc',
    'color_link': '#1155cc',
    'color_text': '#333333',
    'color_url': '#009900',
  },
  'kennedy': {
    'color_bg': '#f1f1f1',
    'color_border': '#dd4b39',
    'color_link': '#4d90fe',
    'color_text': '#222222',
    'color_url': '#3d9400',
  },
  'flamingo': {
    'color_bg': '#feeeff',
    'color_border': '#d1d1ed',
    'color_link': '#5577ee',
    'color_text': '#000000',
    'color_url': '#44bbbb',
  },
  'monochrome': {
    'color_bg': '#eeeeee',
    'color_border': '#666666',
    'color_link': '#333333',
    'color_text': '#666666',
    'color_url': '#999999',
  },
  'barbecue': {
    'color_bg': '#666666',
    'color_border': '#555555',
    'color_link': '#ffcc00',
    'color_text': '#808080',
    'color_url': '#e8ab00',
  },
  'miami': {
    'color_bg': '#d6f8ff',
    'color_border': '#89d1ff',
    'color_link': '#3b8aeb',
    'color_text': '#333333',
    'color_url': '#53be05',
  },
  'shamrock': {
    'color_bg': '#f5ffe9',
    'color_border': '#449944',
    'color_link': '#009900',
    'color_text': '#596659',
    'color_url': '#779977',
  }
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(36.5987, -121.8950),
    zoom: 12
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var adUnitDiv = document.createElement('div');
  var adUnitOptions = {
    format: google.maps.adsense.AdFormat.HALF_BANNER,
    position: google.maps.ControlPosition.TOP_CENTER,
    backgroundColor: '#c4d4f3',
    borderColor: '#e5ecf9',
    titleColor: '#0000cc',
    textColor: '#000000',
    urlColor: '#009900',
    publisherId: 'ca-google-maps_apidocs',
    map: map,
    visible: true
  };
  var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

  var format = document.getElementById('format');
  google.maps.event.addDomListener(format, 'change', function() {
    adUnit.setFormat(google.maps.adsense.AdFormat[this.value]);
  });

  var style = document.getElementById('style');
  google.maps.event.addDomListener(style, 'change', function() {
    var adStyle = SAMPLE_AD_STYLES[this.value];
    adUnit.setBackgroundColor(adStyle['color_bg']);
    adUnit.setBorderColor(adStyle['color_border']);
    adUnit.setTitleColor(adStyle['color_link']);
    adUnit.setTextColor(adStyle['color_text']);
    adUnit.setUrlColor(adStyle['color_url']);
  });

  var position = document.getElementById('position');
  google.maps.event.addDomListener(position, 'change', function() {
    adUnit.setPosition(google.maps.ControlPosition[this.value]);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div style="height:15%">
      <div style="padding:20px; display: inline-block;">
        <label for="format">Format:</label>
        <select id="format">
          <option value="LEADERBOARD">Leaderboard</option>
          <option value="BANNER">Banner</option>
          <option value="HALF_BANNER" selected="selected">Half Banner</option>
          <option value="SKYSCRAPER">Skyscraper</option>
          <option value="WIDE_SKYSCRAPER">Wide Skyscraper</option>
          <option value="VERTICAL_BANNER">Vertical Banner</option>
          <option value="BUTTON">Button</option>
          <option value="SMALL_SQUARE">Small Square</option>
          <option value="SQUARE">Square</option>
          <option value="SMALL_RECTANGLE">Small Rectangle</option>
          <option value="MEDIUM_RECTANGLE">Medium Rectangle</option>
          <option value="LARGE_RECTANGLE">Large Rectangle</option>
          <option value="SMALL_VERTICAL_LINK_UNIT">Small Vertical Link Unit</option>
          <option value="MEDIUM_VERTICAL_LINK_UNIT">Medium Vertical Link Unit</option>
          <option value="LARGE_VERTICAL_LINK_UNIT">Large Vertical Link Unit</option>
          <option value="X_LARGE_VERTICAL_LINK_UNIT">Extra Large Vertical Link Unit</option>
          <option value="SMALL_HORIZONTAL_LINK_UNIT">Small Horizontal Link Unit</option>
          <option value="LARGE_HORIZONTAL_LINK_UNIT">Large Horizontal Link Unit</option>
        </select>
      </div>
      <div style="padding:20px; display: inline-block;">
        <label for="style">Style:</label>
        <select id="style">
          <option value="default" selected>Maps API default</option>
          <option value="modern">Modern</option>
          <option value="plain">Plain</option>
          <option value="kennedy">Kennedy</option>
          <option value="monochrome">Monochrome</option>
          <option value="barbecue">Barbecue</option>
          <option value="flamingo">Flamingo</option>
          <option value="miami">Miami</option>
          <option value="shamrock">Shamrock</option>
        </select>
      </div>
      <div style="padding:20px; display: inline-block;">
        <label for="position">Position:</label>
        <select id="position">
          <option value="TOP_CENTER" selected="selected">Top Center</option>
          <option value="TOP_LEFT">Top Left</option>
          <option value="TOP_RIGHT">Top Right</option>
          <option value="RIGHT_TOP">Right Top</option>
          <option value="LEFT_TOP">Left Top</option>
          <option value="RIGHT_CENTER">Right Center</option>
          <option value="LEFT_CENTER">Left Center</option>
          <option value="BOTTOM_CENTER">Bottom</option>
          <option value="BOTTOM_LEFT">Bottom Left</option>
          <option value="BOTTOM_RIGHT">Bottom Right</option>
          <option value="LEFT_BOTTOM">Left Bottom</option>
          <option value="RIGHT_BOTTOM">Right Bottom</option>
        </select>
      </div>
    </div>
    <div id="map-canvas" style="height:85%"></div>
  </body>
</html>

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Last updated March 17, 2015.