trash-area.com ≫ blog ≫ プログラミング ≫ javascript ≫ Google Maps(API) と Adsense
Google Maps にアドセンスを貼り付けてみるネタです。
標準で用意されているAPIの GAdsManagerだとあんまりうまく動作しませんね。
アドセンスの位置を Google Maps の上に重ねて配置してるだけです。
重ねてレイアウトってのには CSS なり javascript なりいくつか方法はあるのでしょうが、
ここでは Google Maps API の GControlというものを使ってみます。
GControl って 地図の左上にとかについてる「サイズ縮小／拡大」とかのコントロールや、「航空地図へ切り替え」とかのボタン(の元)のことですね。
これをサブクラス化して UI部分はHTMLとかで作成、動作は clickイベントなどを捕まえて好きなことをさせると自分好みのコントロールを定義することができるようです。
(参考) カスタムコントロールを作成 – Google Maps API – Google Code
ここまでくると勘のいい人はわかると思いますが、
このカスタムコントロールの中身を Google アドセンスのコードにしているだけです。
アドセンスの規約的にはどうなんでしょうね。
CSSを適用してハイライトするくらいでしょうか？謎です。
まずは普通にアドセンスのコードを取得します。
ここでは 120×240のタイプで取得しています。
で、そいつを DIV で括って id つけて参照できるようにしています。
<div id="ads"> <script type="text/javascript"> google_ad_client = "pub-xxxxxxxx"; /* 120x240 */ google_ad_slot = "4567900153"; google_ad_width = 120; google_ad_height = 240; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> |
あとはGoogle Maps API のイニシャライズでカスタムコントロールを作成して追加しています。
Google のヘルプを見る限りでは GControl ってインターフェースとなってるんですけど
new できちゃうとこが javascriptな感じでしょうか。
<script src="http://maps.google.com/maps?file=api&v=2&key={あなたのAPIキー}" type="text/javascript" charset="utf-8"></script> <div id="map" style="width:450px; height:300px">ここにはGoogleMapが表示されます。</div> <script type="text/javascript"> if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var gpos = new GLatLng(35.625777,139.768927); // お台場のガンダム map.setCenter(gpos, 17); map.addOverlay(new GMarker(gpos)); // ここから ------------------------------------------ var gc = new GControl(); gc.initialize = function(map) { var ads = document.getElementById("ads"); ads.style.display = "block"; map.getContainer().appendChild(ads); return ads; } gc.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(15, 5)); } map.addControl(gc); // ここまで ------------------------------------------ } </script> |
コントロールを使うと、GControlPosition という表示位置を指定する専用クラスが使えて
これが結構便利な動作をしてくれます。