Google Adsense グーグルアドセンスを地図の中に表示する方法

スポンサードリンク

Google Adsense グーグルアドセンスを地図の中に表示する方法

Posted by 管理人 on 2012年11月4日 Leave a comment (1) Go to comments

グーグルから広告が少ない。もっと大きい広告にして数も増やせとのメールが来たのですが、さてどこに広告を貼り付ければ良いのか。調べていたら地図の中にもアドセンスを表示できるのですね。

Google Adsense グーグルアドセンスを地図の中に表示する

詳しくは、Google Maps JavaScript API V3 AdSense ライブラリをご参照下さい。広告の大きさやデザイン、表示する位置などの判りやすいデモサンプルもありました。

1.基本ソース

標準マップに下記AA.　BB.　を追加し、CC.部のサイト運営者IDを自分のものに置き換えます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=adsense"></script>
    <script>
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(35.595344,139.810535),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        var adUnitDiv = document.createElement('div');//････AA.追加

　　　　//････BB.ここから
        var adUnitOptions = {
          format: google.maps.adsense.AdFormat.HALF_BANNER,
          position: google.maps.ControlPosition.TOP_CENTER,
          publisherId: 'ca-pub-xxxxxxxxxxxxx',//･････CC.　自分のサイト運営者IDと置き換えます。
          map: map,
          visible: true
        };
        var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
      }
　　　　//････BB.ここまで追加

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  <title></title>
</head>
  <body>
<div id="map_canvas" style="width : 900px;height : 700px;"></div>
</body>
</html>

2.コピペ用

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=adsense"></script>
    <script>
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(35.595344,139.810535),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        var adUnitDiv = document.createElement('div');//････AA.追加

　　　　//････BB.ここから
        var adUnitOptions = {
          format: google.maps.adsense.AdFormat.HALF_BANNER,
          position: google.maps.ControlPosition.TOP_CENTER,
          publisherId: 'ca-google-maps_apidocs',//･････CC.
          map: map,
          visible: true
        };
        var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
      }
　　　　//････BB.ここまで追加

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  <title></title>
</head>
  <body>
<div id="map_canvas" style="width : 900px;height : 700px;"></div>
</body>
</html>

3.サイト運営者ID（publisherId）の変更

Adsenseのホーム画面の上部にサイト運営者IDが表示されています。

サイト運営者 ID: pub-xxxxxxxxxxxxxxxx

これを上記ソースの・・・・・CC.部と置き換え

これで表示されるはずです。

4.広告表示カラーの変更

上記ソースにカラー指定を追加すれば、アドセンス広告の色を変更できます。

var adUnitOptions = 
{ 
format: google.maps.adsense.AdFormat.HALF_BANNER, 
position: google.maps.ControlPosition.TOP_CENTER, 
publisherId: 'pub-xxxxxxxxxxxxx',//･････CC.　自分のサイト運営者IDと置き換えます。 

backgroundColor: '#ffffff', 
borderColor: '#000000', 
titleColor: '#1155cc', 
textColor: '#000000', 
urlColor: '#009900', 

map: map, 
visible: true

<モダン>
          backgroundColor: '#ffffff',
          borderColor: '#000000',
          titleColor: '#1155cc',
          textColor: '#000000',
          urlColor: '#009900',

<プレーン>
          backgroundColor: '#f5f5f5',
          borderColor: '#cccccc',
          titleColor: '#1155cc',
          textColor: '#333333',
          urlColor: '#009900',

<ケネディ>
          backgroundColor: '#f1f1f1',
          borderColor: '#dd4b39',
          titleColor: '#4d90fe',
          textColor: '#222222',
          urlColor: '#3d9400',

<フラミンゴ>
          backgroundColor: '#feeeff',
          borderColor: '#d1d1ed',
          titleColor: '#5577ee',
          textColor: '#000000',
          urlColor: '#44bbbb',

<モノクローム>
          backgroundColor: '#eeeeee',
          borderColor: '#666666',
          titleColor: '#333333',
          textColor: '#666666',
          urlColor: '#999999',

<バーベキュー>
          backgroundColor: '#666666',
          borderColor: '#555555',
          titleColor: '#ffcc00',
          textColor: '#808080',
          urlColor: '#e8ab00',

<マイアミ>
          backgroundColor: '#d6f8ff',
          borderColor: '#89d1ff',
          titleColor: '#3b8aeb',
          textColor: '#333333',
          urlColor: '#53be05',

<クローバー>
          backgroundColor: '#f5ffe9',
          borderColor: '#449944',
          titleColor: '#009900',
          textColor: '#596659',
          urlColor: '#779977',