AngularJSを使ってGoogleマップ(17)地図上にGoogleアドセンスの広告を表示

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

(1)サンプルコード
 
デモ表示へ
①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;
}

(2)サンプルコードの内容
 
1)adSenseライブラリを使用する
 
下記のようにlibraries=adsenseを指定します。
 
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?key=自分のGoogleマップAPIキー&sensor=false&libraries=adsense”></script>
 
2)AdUnitOptionsでGoogleアドセンスの広告設定
 
・format
 広告のフォーマット。AdFormatクラスで指定する。
 指定出来るフォーマットは※1参照
 
・position
 広告の表示位置
 
・publisherId
 Googleアドセンスアカウントのサイト運営者IDを指定
 
・channelNumber
 Googleアドセンスでカスタムチャネルを使用している場合、ここでチャネルIDを設定できるようです。
 
・backgroundColor
 広告の背景色
 
・borderColor
 広告の枠線の色
 
・titleColor
広告タイトルのリンクの色。
 
・textColor
 広告クリエイティブのテキストの色
 
・urlColor:
 広告属性 URL のリンクの色。
 
3)adsense.AdUnitを使って広告を表示
 
var adUnitDiv = document.createElement(‘div’);
var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
 
4)projection_changedイベント
 
地図が表示される際に一度発行されるprojection_changedイベントを使って広告を設定します。
 
※1広告のフォーマットの種類
 
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マップの他の記事の目次

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください