AngularJSを使ってGoogleマップ（１７）地図上にGoogleアドセンスの広告を表示

wp-admin

11年前

ストリートビューサービスを使って、クリックした地点のストリートビューを表示するサンプルコードを作成しました。

（１）サンプルコード
　
デモ表示へ
①HTML本文

<div ng-controller="MyCtrl">
<div class="row">
  <div class="col-sm-6">
    <google-map 
      id="map-canvas"
      center="map.center"
      zoom="map.zoom"
      draggable="true"
      options="map.options"
      control="map.control"
      events="map.events"
    >
    </google-map>
  </div>
  <div class="col-sm-6">
  </div>
</div>
</div>

②スクリプト（js/map17.js）

var mapApp = angular.module('googleMapApp', ['google-maps','ui.bootstrap']);

mapApp.controller("MyCtrl", function ($scope) {
  angular.extend($scope, {
  map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 15,
      control: {},
      events: { 
        projection_changed: function (map, eventName, originalEventArgs) {
          var adUnitDiv = document.createElement('div');

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

③CSS

@import url('bootstrap/css/bootstrap.css');
.angular-google-map-container {
  height: 400px;
}

（２）サンプルコードの内容
　
１）adSenseライブラリを使用する
　
下記のようにlibraries=adsenseを指定します。
　
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?key=自分のGoogleマップAPIキー&sensor=false&libraries=adsense”></script>
　
２）AdUnitOptionsでGoogleアドセンスの広告設定
　
・format
　広告のフォーマット。AdFormatクラスで指定する。
　指定出来るフォーマットは※１参照
　
・position
　広告の表示位置
　
・publisherId
　Googleアドセンスアカウントのサイト運営者IDを指定
　
・channelNumber
　Googleアドセンスでカスタムチャネルを使用している場合、ここでチャネルIDを設定できるようです。
　
・backgroundColor
　広告の背景色
　
・borderColor
　広告の枠線の色
　
・titleColor
広告タイトルのリンクの色。
　
・textColor
　広告クリエイティブのテキストの色
　
・urlColor:
　広告属性 URL のリンクの色。
　
３）adsense.AdUnitを使って広告を表示
　
var adUnitDiv = document.createElement(‘div’);
var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
　
４）projection_changedイベント
　
地図が表示される際に一度発行されるprojection_changedイベントを使って広告を設定します。
　
※１広告のフォーマットの種類
　
LEADERBOARD: 横方向いっぱいの長さの表示領域を作成。
BANNER: 横長の「バナー」広告を作成。
HALF_BANNER: 小さい横長の「バナー」広告を作成。
SKYSCRAPER: 大きい縦長の広告を作成。
WIDE_SKYSCRAPER: 大きく幅の広い縦長の広告を作成。
VERTICAL_BANNER: 中程度の縦長の広告を作成。
BUTTON: 小さい広告を作成。
SMALL_SQUARE: 少し大きい正方形の広告を作成。
SQUARE: 大きい正方形の広告を作成。
SMALL_RECTANGLE: 小さい長方形の広告を作成。
MEDIUM_RECTANGLE: 中程度の長方形の広告を作成。
LARGE_RECTANGLE: 大きい長方形の広告を作成。
SMALL_VERTICAL_LINK_UNIT: 小さい縦長のリンクユニットを作成。
MEDIUM_VERTICAL_LINK_UNIT: 中程度の縦長のリンクユニットを作成。
LARGE_VERTICAL_LINK_UNIT: 大きい縦長のリンクユニットを作成。
X_LARGE_VERTICAL_LINK_UNIT: 特大の縦長のリンクユニットを作成。
SMALL_HORIZONTAL_LINK_UNIT: 小さい横長のリンクユニットを作成。
LARGE_HORIZONTAL_LINK_UNIT: 大きい横長のリンクユニットを作成。
　
AngularJS、Googleマップの他の記事の目次