Googleマップに広告を表示させる= Map Ad Unit サンプル =
〔お断り〕
- この「Map Ad Unit」は、2015年11月に廃止になりました。
- 代替の仕組みについて検討しています。
・Googleマップに Google AdSense の広告を表示させるには、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>