AdSense Library

1. Overview
2. Using the Library
3. Your AdSense Account
4. The Maps Ad Unit
5. Maps Ad Unit Formats
6. Maps Ad Unit Ad Styles
7. Maps Ad Unit Positioning

Overview

The AdSense library allowed you to monetize your Google Maps JavaScript API application through use of the Maps Ad Unit. The Ad Unit creates context-sensitive display advertising based on the Maps current viewport.

Using the Library

The AdSense service is a self-contained library, separate from the main Maps API JavaScript code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=adsense"></script>

Loading the google.maps.adsense library will trigger a connection to Google's ad servers, and may set a browser cookie, even if the Maps API has been loaded from maps.googleapis.com.

See the Libraries Overview for more information.

Your AdSense Account

Adding display ads to your map requires that you have an AdSense account enabled for AdSense for Content. If you don't yet have an AdSense account, sign up for one. Once you have done so (or if you already have an account) make sure you've also enabled the account with AdSense for Content.

Once you have an Adsense for Content account, you will have received an AdSense for Content (AFC) publisher ID. This publisher ID is used within your code to link any advertising shown to your AdSense account, allowing you to share in advertising revenue when a user clicks on one of the ads shown on your map.

The Maps Ad Unit

The Maps Ad Unit is a new advertising option within the Google Maps JavaScript API for managing display advertising within your Maps API application. You create a Maps Ad Unit with the AdUnit constructor. The Maps Ad Unit displays a small panel containing AdSense Text Ads tailored to what is viewed on the map within its viewport. The display ad may appear in a default location depending on the map's Ad Unit Format, on the map in a ControlPosition which you specify, or within an external <div> element.

To share advertising revenue, make sure to also specify your AdSense for Content publisher ID when creating your AdUnit. (The AdUnit will not work without an associated publisher ID.) You will begin receiving advertising revenue for any clicks on ads within the Maps Ad Unit in your API application. Optionally, you may also specify an AdSense for Content channelNumber if you've set that up. (More information on advertising channels is located here.)

The following sample shows an AdUnit set up to receive advertising revenue. Note that you should use your own publisher ID in your application.

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

  var adUnitDiv = document.createElement('div');

  // Note: replace the publisher ID noted here with your own
  // publisher ID.
  var adUnitOptions = {
    format: google.maps.adsense.AdFormat.HALF_BANNER,
    position: google.maps.ControlPosition.TOP_CENTER,
    publisherId: 'ca-google-maps_apidocs',
    map: map,
    visible: true
  };
  var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
}

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

Maps Ad Unit Formats

A Maps Ad Unit supports a variety of display formats of type google.maps.adsense.AdFormat which match supported AdSense formats. Both text ads and link units are supported:

• LEADERBOARD creates a fully horizontal display area.
• BANNER creates a horizontal "banner" ad.
• HALF_BANNER creates a smaller horizontal "banner" ad.
• SKYSCRAPER creates a large vertical ad.
• WIDE_SKYSCRAPER creates a wide vertical ad using larger type.
• VERTICAL_BANNER creates a medium-sized vertical ad.
• BUTTON creates a small ad.
• SMALL_SQUARE creates a slightly larger square ad.
• SQUARE creates a large square ad with large type.
• SMALL_RECTANGLE creates a small rectangular ad.
• MEDIUM_RECTANGLE creates a medium rectangular ad.
• LARGE_RECTANGLE creates a large rectangular ad.
• SMALL_VERTICAL_LINK_UNIT creates a small vertical link unit.
• MEDIUM_VERTICAL_LINK_UNIT creates a medium vertical link unit.
• LARGE_VERTICAL_LINK_UNIT creates a large vertical link unit.
• X_LARGE_VERTICAL_LINK_UNIT creates an extra large vertical link unit.
• SMALL_HORIZONTAL_LINK_UNIT creates a small horizontal link unit.
• LARGE_HORIZONTAL_LINK_UNIT creates a large horizontal link unit.

Any controls will appear on top of the display advertising.

The following sample allows you to modify the AdUnit's format and see how the advertising panel is displayed.

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'),
      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);

Maps Ad Unit Ad Styles

The AdUnit's background, border, title, text, and link colors can be styled by setting one or more of the following ad unit options. If an ad style is not provided, the default colors will be used.

• backgroundColor: Ad unit background color.
• borderColor: Ad unit border color.
• titleColor: Ad title link color.
• textColor: Ad creative text color.
• urlColor: Ad attribution URL link color.

Colors can be defined using either hexadecimal color codes (e.g. '#0000ff') or one of the named HTML colors (e.g. 'blue').

Note that the AdSense system will perform some basic checks to ensure that the ad is legible and may override, say, black on black color settings. In addition, the on-hover link colors cannot be customized and will be set automatically by the AdSense system.

For more information, see the google.maps.adsense API reference.

Maps Ad Unit Positioning

Ad Units can be positioned in several different locations on the map. You can control the positioning of an Ad Unit through the position property of the AdUnitOptions object. Positioning of the Ad Unit is not absolute; instead, the API will layout the Ad Unit by "flowing" them around existing map elements, or controls, within given constraints (such as the map size).

The following positions are supported:

• TOP_CENTER indicates that the adunit should be placed along the top center of the map.
• TOP_LEFT indicates that the adunit should be placed along the top left of the map, with any sub-elements of the control "flowing" towards the top center.
• TOP_RIGHT indicates that the adunit should be placed along the top right of the map, with any sub-elements of the control "flowing" towards the top center.
• LEFT_TOP indicates that the adunit should be placed along the top left of the map, but below any TOP_LEFT elements.
• RIGHT_TOP indicates that the adunit should be placed along the top right of the map, but below any TOP_RIGHT elements.
• LEFT_CENTER indicates that the adunit should be placed along the left side of the map, centered between the TOP_LEFT and BOTTOM_LEFT positions.
• RIGHT_CENTER indicates that the adunit should be placed along the right side of the map, centered between the TOP_RIGHT and BOTTOM_RIGHT positions.
• LEFT_BOTTOM indicates that the adunit should be placed along the bottom left of the map, but above any BOTTOM_LEFT elements.
• RIGHT_BOTTOM indicates that the adunit should be placed along the bottom right of the map, but above any BOTTOM_RIGHT elements.
• BOTTOM_CENTER indicates that the adunit should be placed along the bottom center of the map.
• BOTTOM_LEFT indicates that the adunit should be placed along the bottom left of the map, with any sub-elements of the control "flowing" towards the bottom center.
• BOTTOM_RIGHT indicates that the adunit should be placed along the bottom right of the map, with any sub-elements of the control "flowing" towards the bottom center.

Note that these positions may coincide with positions of existing UI elements or controls. In those cases, the controls will "flow" according to the logic noted for each position and appear as close as possible to their indicated position.

The below example demonstrates how to position a vertical Ad Unit on the right side of the map canvas.

var adUnitDiv = document.createElement('div');
var adUnitOptions = {
  format: google.maps.adsense.AdFormat.VERTICAL_BANNER,
  position: google.maps.ControlPosition.RIGHT_CENTER,
  publisherId: 'YOUR_PUBLISHER_ID',
  map: map,
  visible: true
};
var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

In some cases, you may wish to position the Ad Unit outside of the map canvas. Do do this, create an additional <div> element elsewhere on the page, set the position property to null and assign the Ad Unit object to the empty <div>. The below example demonstrates how to place the Ad Unit inside of a <div> named "adspace".

var adUnitDiv = document.getElementById('adspace');
var adUnitOptions = {
  format: google.maps.adsense.AdFormat.LEADERBOARD,
  publisherId: 'YOUR_PUBLISHER_ID',
  map: map,
  visible: true
};
var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);