Googleマップに広告を表示させる
= Map Ad Unit サンプル =

〔お断り〕
  • この「Map Ad Unit」は、2015年11月に廃止になりました。
  • 代替の仕組みについて検討しています。

Googleマップに Google AdSense の広告を表示させるには、Map Ad Unit に関するコードを書き足します。
表示させる広告の大きさ(フォーマット)や位置、色合い(スタイル)などを様々に変えることができます。このページは、どのように表示されるかのサンプルです。
広告の設置方法の解説はこちらにあります。 ▶Map Ad Unitの設置方法へ

     

《広告の設定に使える大きさ(フォーマット)、位置、スタイル》

《大きさ(フォーマット)》

AdFormat.LEADERBOARD,
AdFormat.BANNER,
AdFormat.HALF_BANNER,
AdFormat.SKYSCRAPER,
AdFormat.WIDE_SKYSCRAPER,
AdFormat.VERTICAL_BANNER,
AdFormat.BUTTON,
AdFormat.SMALL_SQUARE,
AdFormat.SQUARE,
AdFormat.SMALL_RECTANGLE,
AdFormat.MEDIUM_RECTANGLE,
AdFormat.LARGE_RECTANGLE,
AdFormat.SMALL_VERTICAL_LINK_UNIT,
AdFormat.MEDIUM_VERTICAL_LINK_UNIT,
AdFormat.LARGE_VERTICAL_LINK_UNIT,
AdFormat.X_LARGE_VERTICAL_LINK_UNIT,
AdFormat.SMALL_HORIZONTAL_LINK_UNIT,
AdFormat.LARGE_HORIZONTAL_LINK_UNIT,
 

《位置》

ControlPosition.TOP_CENTER,
ControlPosition.TOP_LEFT,
ControlPosition.TOP_RIGHT,
ControlPosition.RIGHT_TOP,
ControlPosition.LEFT_TOP,
ControlPosition.RIGHT_CENTER,
ControlPosition.LEFT_CENTER,
ControlPosition.BOTTOM_CENTER,
ControlPosition.BOTTOM_LEFT,
ControlPosition.BOTTOM_RIGHT,
ControlPosition.LEFT_BOTTOM,
ControlPosition.RIGHT_BOTTOM,
  
 
《スタイル - サンプル》

/* Maps API default */
backgroundColor: '#c4d4f3',
borderColor: '#e5ecf9',
titleColor: '#0000cc',
textColor: '#000000',
urlColor: '#009900',

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

/* Plain */
backgroundColor: '#f5f5f5',
borderColor: '#cccccc',
titleColor: '#1155cc',
textColor: '#333333',
urlColor: '#009900',

/* Kennedy */
backgroundColor: '#f1f1f1',
borderColor: '#dd4b39',
titleColor: '#4d90fe',
textColor: '#222222',
urlColor: '#3d9400',

/* Monochrome */
backgroundColor: '#eeeeee',
borderColor: '#666666',
titleColor: '#333333',
textColor: '#666666',
urlColor: '#999999',

/* Barbecue */
backgroundColor: '#666666',
borderColor: '#555555',
titleColor: '#ffcc00',
textColor: '#808080',
urlColor: '#e8ab00',

/* Flamingo */
backgroundColor: '#feeeff',
borderColor: '#d1d1ed',
titleColor: '#5577ee',
textColor: '#000000',
urlColor: '#44bbbb',

/* Miami */
backgroundColor: '#d6f8ff',
borderColor: '#89d1ff',
titleColor: '#3b8aeb',
textColor: '#333333',
urlColor: '#53be05',

/* Shamrock */
backgroundColor: '#f5ffe9',
borderColor: '#449944',
titleColor: '#009900',
textColor: '#596659',
urlColor: '#779977',

《Google AdSense を表示させる地図のソース》

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Googleマップ GAdsManager</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=adsense"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(35.681382,139.766084)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);
      var adUnitDiv = document.createElement('div');
      var adUnitOptions = {
      	format: google.maps.adsense.AdFormat.HALF_BANNER,//AdSenseの種類。18種類。
      	position: google.maps.ControlPosition.TOP_CENTER,//表示させる位置。12箇所。
		/* Maps API default */ // 色を設定。以下5行を書かなければデフォルト。
      	backgroundColor: '#c4d4f3', // 色を設定。
      	borderColor: '#e5ecf9', // 色を設定。
      	titleColor: '#0000cc', // 色を設定。
      	textColor: '#000000', // 色を設定。
      	urlColor: '#009900', // 色を設定。
      	publisherId: 'pub-xxxxxxxxxxxx', //ご自身の GoogleAdSense の IDを記入。
      map: map,
      visible: true
     };
      var adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
    }
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 600px; height: 400px"></div>
</body>
</html>

おすすめサイト・関連サイト…

Last updated : 2022/11/23