Googleマップに広告を表示させる
= Map Ad Unit に関するコード =
〔お断り〕
- この「Map Ad Unit」は、2015年11月に廃止になりました。
- 代替の仕組みについて検討しています。
|
・下の地図[1]のような Googleマップを作っていた場合、これに、地図[2]のように Google AdSense の広告を表示させるには、Map Ad Unit に関するコードを書き足します。 ・表示させた地点（国・地域など）の情報に近いような広告が表示されます。 ・大きさ(フォーマット)や位置、色合いなどのサンプルがこちらにあります。 ▶ Map Ad Unit のサンプルへ |
| 地図 [1] ＝ 基本の 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>