Googleマップに広告を表示させる
= Map Ad Unit に関するコード =

〔お断り〕
  • この「Map Ad Unit」は、2015年11月に廃止になりました。
  • 代替の仕組みについて検討しています。
  • 少々、お待ちください。
下の地図[1]のような Googleマップを作っていた場合、これに、地図[2]のように Google AdSense の広告を表示させるには、Map Ad Unit に関するコードを書き足します。
表示させた地点(国・地域など)の情報に近いような広告が表示されます。
大きさ(フォーマット)や位置、色合いなどのサンプルがこちらにあります。
    ▶ Map Ad Unit のサンプルへ
 地図 [1] = 基本の Google マップ =
 地図 [2] = 地図上に Google AdSense を表示させた Google マップ =
 ・地図を移動させ、地図上の広告の内容を確かめてみてください。
住所・キーワードなど   

《地図[1]の JavaScript 部分のコード》

<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: 14,
  center: new google.maps.LatLng(35.681382,139.766084)
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

《Google AdSense を表示させた地図[2]のソース》

<!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: 14,
  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 : 2017/11/21