商品やお店探しに便利な地図をつくる（Advertising Using AdSense for Maps）

沖縄を訪れる観光客用に、探している商品やお店の種類や店名を入れると場所を教えてくれる地図ソフトを探していたところ、Googleから「Advertising Using AdSense for Maps」（地図用配信広告）がAPIとして提供されていたので早速利用してみました。地元の人にも重宝されそうなソフトです。病院、コンビニ、ATMの場所は意外とわからないですからね。
以下、構築手順の備忘録です。

１．Google MAPS APIを利用するためには、Googleのメールアドレスを持っている必要があります。まだの方はメールアドレスの取得をしておいてください。Googleメール（正式名称は「Googleアカウント」）の取得はこちらから。

２．Google MAPS APIを使うには、Maps API キーを取得する必要があります。まだの方はこちらから取得しておいてください。

３．この画面を出すにはここをクリック。画面右上に「ログイン」の表示があれば、「ログイン」をクリックして先にログインを済ませておいてください。

４．「Code」をクリック

５．「AJAX　APIｓ」をクリック

６．「Google Maps API」をクリック

７．Google Maps API キーを取得済みの方は「 AdSense for Maps」をクリックして先に進んでください。まだの方は「登録して Google Maps API キーを取得します。」をクリックして先に取得をしてください。

８．英語ですが、「Advertising Using AdSense for Maps」の説明画面です。画面の下に移動します。

９．「View example (control-googlebar-ads.html)」をクリックして、サンプル画面を表示させます。

１０．サンプル画面です。このソースを借用しますので、「表示」をクリックして、表示されたメニューから「ページのソース」をクリックします。

１１．ソースが表示されますので、文頭の「」まで全部コピーします。テキストエディタを起動して貼り付け、適当な名前（「map.html」など）で保存します。そのファイルを自分のウェブサイトに移動し、自分のサイトから１０の地図が表示されることを確認してください。

１２．コピーしたソースを加工します。下記に赤で変更箇所を、緑で要領を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: LocalSearch Control</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=＊＊＊"
      type="text/javascript"></script>　←　＊＊＊の部分に取得したGoogle MAPS APIキーを入力
    <script type="text/javascript">
      function initialize() {
        var map;
        if (GBrowserIsCompatible()) {
          var mapOptions = {
            googleBarOptions : {
              style : "new",
              adsOptions : {
                client: "partner-google-maps-api",　←　Google AdSense利用者はログインして
ご自分の「アカウント情報」タブをクリック。表示される画面の最下段に「検索向けAdSense」プロパティとして
表示されているものを入力します。
                channel: "41301183",　←　Google AdSense利用者はログインしてご自分の検索向け
AdSenseのIDを入力。Google AdSenseサイトの「AdSense設定」タブの「チャンネル」
をクリック、さらに「検索向けAdSense」タブをクリックするとチャンネル名とIDの一覧表が出ますので
そこから選んでください。
                adsafe: "high",　←　アダルト広告を出さないレベルの設定です。他に
”medium”、”low”、”off”の設定ができます。
                language: "en"　←　”jp”に変更してください。
              }
            }
          }
          map = new GMap2(document.getElementById("map_canvas"), mapOptions);
          map.setCenter(new GLatLng(33.956461,-118.396225), 13);　←　北緯、東経の座標と
地図の拡大レベルを設定します。表示させたい地域の数字はGoogleマップで確認できます。
          map.setUIToDefault();
          map.enableGoogleBar();
        }
      }
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">

    <div id="map_canvas" style="width: 500px; height: 600px"></div>

　←　地図の幅（width）と高さ（height）の設定です。ご自由にどうぞ。

  </body>

</html>

１３．私が作成したものはここからご覧いただけます。
 




にほんブログ村 ＩＴ技術ブログへ＞＞＞参考になりましたらクリックをお願いいたします。今後の励みになりますので
にほんブログ村

にほんブログ村 ＩＴ技術ブログへ　←　戦闘モード維持のため、参考になりましたらクリックをお願いします。
にほんブログ村
7月 7th, 2010 in API

Leave a comment

Your comment