Google Maps APIブログの「Geotagged Picasa JSON/KML Output + Driving Directions = Instant Scenic Tours!」にあるPicasaウェブアルバムとのマッシュアップ（だけ）を早速試してみた。
→サンプル

公式のサンプルページでは、GDirectionや、toggle機能を備え付けているので一見すると、ちょっと複雑なコードなのだが、写真を貼り付けるだけならKMLファイルをオーバーレイするだけなので、実はものすごく単純な処理。

var albumKML = "http://picasaweb.google.com/data/feed/base/user/kadajp/
albumid/5078431287074407041?kind=photo&alt=kml";
geoxml = new GGeoXml(albumKML);
map.addOverlay(geoxml);

これだけ・・・。PicasaでのKML取得の手順は

1. Picasaの各アルバム内の画面のRSSをクリック。
2. URLの

   http://picasaweb.google.com/data/feed/base/user/kadajp/
   albumid/5078431287074407041?kind=photo&alt=rss&hl=en_US
   

   赤字の部分を
3. alt="kmlにする。
4. 上のコードのvar albumKML = "3のURL";

最近思うのだが、普通にブログにGoogle Mapsを貼り付けるだけならこういった形でKMLやGeoRSSを貼り付けるだけでいいような気がする。例えばマイマップでマーカーを作ってそれをKMLを出力して、自分のブログ内の地図にオーバーレイ。そっちの方がはるかにラク。マーカー一つ一つのlat,lngを調べる必要もない。

サイドバーを付け足したり、カテゴリー別に分けてみたり色々いじってみたい場合には向かないが、Google Maps APIとしては、KMLやGeoRSSの利用をユーザーに促すことによって、巨大なデータベースを構築しようとしていると思われる。（まぁ根拠はありませんが。）

前回の記事（Google Maps APIで右クリックメニューを作成）では単純に右クリックを表示して、ズームレベルを設定するだけだったが、それを本家のGoogleマップっぽくカスタマイズしてみた。

→サンプル

「ここを地図の中心」機能を追加するためには、クリック位置を動的にメニュー内に返さないといけないので、rmenu.innerHTML = "〜"をイベントハンドラー内へ移動。
単純な流れは

• GEvent.addListener(map, "singlerightclick", function(point) {〜}のpointがクリック地点（ピクセル：X座標、Y座標）。
• それを緯度・経度に変換して変数に格納。
• <a href="javascript：map.panTo(変数)>ここを地図の中心</a>

クリック地点の変数をグローバルで宣言して、function map_center(){〜}→メニュー項目に<a href="javascript:map_center()">ここを地図の中心</a>のように一つ一つ貼り付けてもいいんだろうが、こっちの方がメモリーも食わないと思う（多分）・・・。

あとマップからマウスフォーカスが外れたらメニューを非表示にするようにGEvent.addListener(map, "mouseout", function(point) {〜 }});も加えてみた。

//地図のサイズを取得
var MapPX = map.getSize();

//右クリックメニューを作成
var rmenu = document.createElement("div");
      
//右クリックメニューのスタイル
//CSSで定義したい場合は、rmenu.setAttribude("id","〜任意のid名")
rmenu.style.visibility = "hidden";
rmenu.style.backgroundColor = "white";
rmenu.style.border = "2px solid #ececec";
rmenu.style.padding = "2px";
rmenu.style.fontSize = "12px";
rmenu.style.cursor = "pointer";
rmenu.style.color = "#7176bf";   

//右クリックメニューをmap内に返す
map.getContainer().appendChild(rmenu);
      
//右クリック位置を取得してメニュー表示のイベント
GEvent.addListener(map, "singlerightclick", function(point) {
  var rmenux = point.x;
  var rmenuy = point.y;
  if(rmenux > (MapPX.width - 160)) { rmenux = MapPX.width - 160; }
  if(rmenuy > (MapPX.height - 40)) { rmenuy = MapPX.height - 40; }
  var rmenu_pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(rmenux, rmenuy));
  var rmenu_latlng = map.fromContainerPixelToLatLng(point);

  //右クリックメニューの内容(HTML）
  rmenu.innerHTML = "<a href='javascript:map.zoomIn();'>ズームインして詳細を表示</a><br />"
                  + "<a href='javascript:map.zoomOut();'>ズームアウトして広域を表示</a><br />"
                  + "<a href='javascript:map.panTo(new GLatLng" + rmenu_latlng + ");'>ここを地図の中心</a>"

  rmenu_pos.apply(rmenu);
  rmenu.style.visibility = "visible";
});
GEvent.addListener(map, "click", function() {
  if (rmenu.style.visibility == "visible"){
    rmenu.style.visibility = "hidden";
  }
});
//マップからフォーカスが外れたらメニューを非表示
GEvent.addListener(map, "mouseout", function() {
  if (rmenu.style.visibility == "visible"){
    rmenu.style.visibility = "hidden";
  }
});

例のCPA（Cost Per Action）広告、「Refferrals2.0」が正式に日本でも始まった。昨日googleアカウントをチェックしたら、僕のアカウントで使えるようになっていた。
でも、提携している企業がまだ少ないみたい。１カテゴリー（旅行・ゲーム等）に３〜５位。これから増えるといいんだけど・・・。

でも紹介ユニットと同じ扱いなので、Firefoxなどの紹介を含めて１ページに3つまで。そして一つの紹介ユニットには15までのプロダクトを登録できて、リロードのたびにそれがローテーションする。

またアドセンス→紹介のヘルプ（日本語）にも正式に「ご自分のサイトで紹介したプロダクトを推奨したり、勧めたりすることができます。」とあるので「クリックしてね、応援よろしく」みたいなのではない限り、お勧めの文言を付け足す事ができる。

でもこれって、いわゆる普通のアフィリエイトでは？？アドセンスの魅力はクリック単価が比較的高額なので、CPA広告が主流になると、ちょっと嫌かなぁなんて思っています。

ちなみにAdsense日本版は未だに「AdSense広告ユニットに新しいオプションが登場。角のスタイルを選べます。」。
本家のアメリカ版を翻訳するだけでも助かると思うのに、なんでこんなに更新が遅いのだろう・・・。

Google Mapsに右クリックメニューを追加する方法。このコードのメニューの中身はズームレベルを変えるだけだが、応用すれば色々な使い方があると思う。

→サンプル

//地図の中心を取得。
//Google Maps APIで中心の十字架を表示を併用する場合はそちらの方にある「var MapPX = map.getSize();」を削除。

var MapPX = map.getSize();
//右クリックメニューを作成
var rmenu = document.createElement("div");

//右クリックメニューのスタイルを設定。
rmenu.style.visibility = "hidden";
rmenu.style.backgroundColor = "white";
rmenu.style.border = "2px solid black";
rmenu.style.padding = "2px";
rmenu.style.fontSize = "12px";
rmenu.style.cursor = "pointer";

//右クリックメニューの内容(HTML）
rmenu.innerHTML = "<div style='padding:2px' onclick='map.setZoom(2)'>Zoom(2)</div>"
                + "<div style='padding:2px' onclick='map.setZoom(6)'>Zoom(6)</div>"
                + "<div style='padding:2px' onclick='map.setZoom(10)'>Zoom(10)</div>"
                + "<div style='padding:2px' onclick='map.setZoom(16)'>Zoom(14)</div>"
                + "<div style='padding:2px' onclick='map.setZoom(16)'>Zoom(18)</div>"

//右クリックメニューをmap内に返す
map.getContainer().appendChild(rmenu);

//右クリック位置を取得してメニューを表示するイベント。pointはGSize(x,y)で返される。
GEvent.addListener(map, "singlerightclick", function(point) {
  var rmenux = point.x;
  var rmenuy = point.y;
  //MapPX.width、MapPX.heightの後の74・86はメニュー全体の横幅・縦幅。
  if(rmenux > (MapPX.width - 74)) { rmenux = MapPX.width - 74; }
  if(rmenuy > (MapPX.height - 86)) { rmenuy = MapPX.height - 86; }
  var rmenu_pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(rmenux, rmenuy));
  rmenu_pos.apply(rmenu);
  rmenu.style.visibility = "visible";
});

//地図上を左クリックしたらメニューが消える。
GEvent.addListener(map, "click", function() {
  if (rmenu.style.visibility == "visible"){
    rmenu.style.visibility = "hidden";
  }
});

あと上記のコードのようにズームレベルをいじる場合、

function onload(){
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));

これだと機能しないので、mapをグローバルレベルで宣言。

var map;

function onload(){
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));

いつも通りdocument.createElement("div")でdivエレメントを作成して、map.getContainer().appendChild(〜);でmap内に返している。そろそろ自作でコントロールを作成したいが、何分javascriptを始めて2ヶ月もたっていないので・・・。

ところで昨日の夜はひたすらseesaa全体が落ちてしまっていた。
アフィリエイト全開のニュース系ブログ（別名コピペブログ）とかが多すぎるんでわ？

追加：Google Maps APIの右クリックメニューその２

Inside Adsense「Referrals 2.0 launches to all AdSense publishers」によるとそろそろPay Per Action広告が正式に始まるそう。どんな広告かと簡単にいうと、ユーザーが製品を購入すると初めて収益が発生する仕組み。「アクションに対しての収益」が正式な定義なので製品の購入じゃなくてもいいとは思うんだけど、まだ現物を見てないのでバリューコマーズみたいな「普通のアフィリエイト？」というのが今の僕の認識。

とりあえずサポートされている国だけなのだが、AdWords 日本版 公式ブログ「AdWords から新しい広告のご提案。Pay-Per-Action Beta をスタートしました。」なんてあるので日本も正式にサポートされていると思います。

普通のCPC・CPM広告と違って制限は少しゆるめだそうで、「製品の紹介」なので製品のレビューや「おすすめ」なんて事も広告周りに表示しても問題なしらしい。
広告だらけのブログがまた一段と増える予感・・・。

GoogleMapsで経度と緯度を調べるツールを自作しようと思ったので地図の中心に十字マークを設定するコードを追加してみた。

マーカーを貼って地図が移動するたびに、clearoverlayとaddoverlay処理を繰り返すのはなんとなくスマートじゃないような気がするので、縦長と細長の空divエレメントを作って、GControlPositionで位置を設定するようにした。処理の流れをまとめると

1. 十字架のスタイルを設定。
2. 横線と縦線の空divを作成。(backgroundColorで塗りつぶしのブロック要素）
3. 地図の中心位置とdiv要素のオフセット位置を計算。
4. GControlPositionで位置を指定。
5. 4で作成した変数.apply(DOMエレメント);map.getContainer().appendChild(DOMエレメント);

ちなみに正しいjavascript用語を使っているかは不明です。

//cross_px：十字の横幅・縦幅（ピクセル）
//cross_td：十字の太さ（ピクセル）
//cross_cr：十字の色（スタイルシートと同様の書式）
var cross_px = 60;
var cross_td = 2;
var cross_cr = "red";

//十字の縦線のエレメントを設定    
var cross_h_emt =  document.createElement("div");
//IE用にfontSizeを最小値
cross_h_emt.style.fontSize = "1px";
cross_h_emt.style.margin = "0px";
cross_h_emt.style.padding = "0px";
cross_h_emt.style.width = cross_px + "px";
cross_h_emt.style.height = cross_td + "px";
cross_h_emt.style.backgroundColor = cross_cr;

//十字の横線のエレメントを設定
var cross_v_emt =  document.createElement("div");
cross_v_emt.style.margin = "0px";
cross_v_emt.style.padding = "0px";
cross_v_emt.style.width = cross_td+"px";
cross_v_emt.style.height = cross_px + "px";
cross_v_emt.style.backgroundColor = cross_cr;

//十字（縦・横線）の位置を計算
var MapPX = map.getSize();
var mycenterHX = MapPX.width  / 2 - cross_px / 2;
var mycenterHY = MapPX.height / 2 - cross_td / 2;
var mycenterVX = MapPX.width  / 2 - cross_td / 2;
var mycenterVY = MapPX.height / 2 - cross_px / 2;

var mycenter_H = new GSize(mycenterHX,mycenterHY);
var myposH = new GControlPosition(G_ANCHOR_TOP_LEFT, mycenter_H);
myposH.apply(cross_h_emt);
map.getContainer().appendChild(cross_h_emt); 

var mycenter_V = new GSize(mycenterVX,mycenterVY);
var myposV = new GControlPosition(G_ANCHOR_TOP_LEFT, mycenter_V);
myposV.apply(cross_v_emt); 
map.getContainer().appendChild(cross_v_emt);

極めて単純なスクリプト・・・。これをmap = Gmap2();の後に貼り付けてください。

コードの説明をすると（要らないかな？？）、
var cross_px = 60;
var cross_td = 2;
var cross_cr = "red";
上から順に、十字架の大きさ（横幅・縦幅共通）・十字架の太さ・十字架の色。

Googleマップで使われているアイコン一覧

URL:http://maps.google.co.jp/mapfiles/ms/icons/ファイル名（〜.png）
幅32px：高さ32px

シャドウファイルの詳細は下記の通り

	マーカー・ドットアイコン共通。
	プッシュピンアイコン用。

その他のアイコンは「ファイル名.png」を「ファイル名.shadow.png」。例えば

	http://maps.google.co.jp/mapfiles/ms/icons/hiker.png
	http://maps.google.co.jp/mapfiles/ms/icons/hiker.shasow.png

コードの記入例

Icon.shadow="http://maps.google.co.jp/mapfiles/ms/icons/アイコン名.shadow.png";
Icon.iconSize=new GSize(32,32);
Icon.shadowSize=new GSize(59,32);
Icon.iconAnchor=new GPoint(16,32);
Icon.infoWindowAnchor=new GPoint(16,0);

GoogleRidefinderで使われているアイコン一覧

URL:http://labs.google.com/ridefinder/images/ファイル名（〜.png）
幅12px：高さ20px

コードの記入例

Icon.shadow="http://labs.google.com/ridefinder/images/mm_20_shadow.png";
Icon.iconSize=new GSize(12,20);
Icon.shadowSize=new GSize(22,20);
Icon.iconAnchor=new GPoint(6,20);
Icon.infoWindowAnchor=new GPoint(6,1);
Icon.infoShadowAnchor=new GPoint(13,13);

Google Maps Gadgetアイコン一覧

URL:http://www.google.com/mapfiles/gadget/ファイル名（〜.png）
幅31px：高さ27px

コードの記入例

Icon.shadow="http://www.google.com/mapfiles/gadget/arrowshadowSmall80.png"
Icon.iconSize = new GSize(31, 27);
Icon.shadowSize = new GSize(31, 27);
Icon.iconAnchor = new GPoint(8, 27);
Icon.infoWindowAnchor = new GPoint(5, 1);

URL:http://www.google.com/mapfiles/gadget/ファイル名（〜.png）
幅16px：高さ27px

コードの記入例

Icon.shadow="http://www.google.com/mapfiles/gadget/shadow50Small80.png"
Icon.iconSize = new GSize(16, 27);
Icon.shadowSize = new GSize(30, 28);
Icon.iconAnchor = new GPoint(8, 27);
Icon.infoWindowAnchor = new GPoint(5, 1);

Google Earthで使われているアイコン一覧

Google Earth用に使われているアイコン一覧はMile Williams氏のGoogle Earth Icons - Google Maps API Tutorialにある。
英語なので補足しておくと、下記の各ディレクトリにアイコンが収められていてシャドウ用アイコンはファイル名s.pngの形になっている。

例（通常アイコンとシャドウ用アイコン）

	http://maps.google.com/mapfiles/kml/pal4/icon33.png
	http://maps.google.com/mapfiles/kml/pal4/icon33s.png

Google EarthアイコンのURL:

• http://maps.google.com/mapfiles/kml/pal2/ファイル名（〜.png）
• http://maps.google.com/mapfiles/kml/pal3/ファイル名（〜.png）
• http://maps.google.com/mapfiles/kml/pal4/ファイル名（〜.png）
• http://maps.google.com/mapfiles/kml/pal5/ファイル名（〜.png）

いずれも幅32px：高さ32px

コードの記入例

Icon.shadow="http://maps.google.com/mapfiles/kml/pal*/ファイル名s.png";
Icon.iconSize=new GSize(32,32);
Icon.shadowSize=new GSize(59,32);
Icon.iconAnchor=new GPoint(16,32);
Icon.infoWindowAnchor=new GPoint(16,0);

台湾旅行地図では70箇所くらいの地点を表示している。HTMLのメタタグ以外に「台湾地図」「台湾観光」等の単語は一つも入っておらず、XMLからデータを読み込んでいるのでSEO的にどうなんだろう？と思った。（いまさら・・・）
そこで「台北・地図」で検索をかけてみると、Googleで37位。Yahooだと本体じゃなくて親サイトの台湾に住む日本人の台湾が37位。少なくても本体は50位には入っていない。

当然SEOなんてミズモノだから、あまり深くは考えないのだがやはりYahooはHTML内に地図等の単語が入っていたほうが有利っぽい。極端な話h1・h2に数個、それっぽいキーワード＋地図を入れておけば、なんだかスパムっぽいけど「地図」サイトとして認識されるような気がする。あとは外部リンクの数かな？？

なのでYahooはほうっておいて（放ってはいけないんですが）、GoogleにKMLファイルをインデックスさせようと思う。公式GoogleMapsAPIブログ「Three new KML resources up」によるとKMLを作成・アップロードする事で

• サイト内の場所データがGooglebotに認識される。
• するとGoogleMapsやGoogleEarthの検索結果に反映される。

まぁ当然やっておいた方がいいのだが、僕はメモ帳でxmlを作っているのでメンドクサイ・・・。

GoogleMapsにおける基本的なKMLの書式は

<?xml version="1.0" encoding="UTF-8"?>
  <kml xmlns="http://earth.google.com/kml/2.1">
    <Placemark>
      <name>東京タワー</name>
      <description>実は生まれてから一度も上った事がないのですよ。</description>
      <Point>
        <coordinates>経度,緯度</coordinates>
      </Point>
    </Placemark>
  </kml>

GoogleMapsでは緯度・経度の順番なのだが、KMLでは緯度・経度の順なので注意。このファイルを拡張子.kmlで保存。
次にsitemap.xmlを次のように作成。

<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>http://www.地図サイトのurl/先に作成したkml（〜..kml）</loc>
    </url>
  </urlset>

この二つをアップロード。より詳しい説明は下記のURLで

• GoogleEarth - What is KML?
• GoogleMapsAPI - Google Maps KML Sitemaps
• GoogleMaspAPI - Discussion Group - 「SEO」の検索結果

もちろんSeesaaではトップページと同じディレクトリにアップロードができないので、結局地図コンテンツ（HTML）をhttp://maoxiong.up.seesaa.net/に集中させなくてはなりません。
有料でもいいからもっと充実したプレミアム版を期待しています。

Google Maps API Blog「DragZoomControl v1.0: Easier zooming, coming right up!」に書いていたDragZoomControlを使ってみた。右上のGoogleMapsにある虫メガネがそれ。
メガネボタンを押すと、その大きさに合わせてズームできる。普通のズームボタンは一つ一つなのでかなり軽快な感じ。

導入方法は

1. gmapユーティリティライブラリの真ん中辺・「DragZoom」にあるJavascript includeを右クリックで保存。
2. 虫メガネ（アクティブ中）の画像は
   こちらは待機中の画像。
   アクティブ中の画像
3. 1のライブラリをアップロードしてインクルード。
   

   <script src="アップロードしたディレクトリ/gzoom.js" type="text/javascript"></script>

4. var map = new GMap2(document.getElementById("map"));の後に下記のコードを追加。
   

     /* その１：オーバーレイ・ボックスの設定*/
     var boxStyleOpts = {
       opacity: .2,
       border: "2px solid red"
     }
   
     /* その２：その他オプションの設定 */
     var otherOpts = {
       buttonHTML: "<img src='虫メガネの画像をアップロードしたディレクトリ/zoom-button.gif' />",
       buttonZoomingHTML: "<img src='虫メガネの画像をアップロードしたディレクトリ/zoom-button-activated.gif' />",
       buttonStartingStyle: {width: '24px', height: '24px'}
     };
   
     map.addControl(new DragZoomControl(boxStyleOpts, otherOpts));
   

もちろん色々なオプションが設定できるのでその詳細。

オプションその１（boxStyleOptsに該当）

opacity

オーバーレイの透過度：0〜1の間。デフォルトは0.2。

fillColor

オーバーレイの色：デフォルトは#000（黒）。

border

ボックスの色：スタイルシートと同様の記述。デフォルトは"2px solid blue"。

オプションその２（otherOptsに該当）

buttonHTML

ズームボタン（待機中）のHTML：画像ファイルやテキストなど。

buttonStartingStyle

ズームボタンのCSS。

buttonStyle

待機中のズームボタンに適用されるCSS。デフォルトは{background :'#FFF'}

buttonZoomingHTML

ズームボタン（アクティブ中）のHTML。

buttonZoomingStyle

アクティブ中のズームボタンに適用されるCSS。デフォルトは{background :'#FF0'}

overlayRemoveTime

描画されたボックスを表示する時間（ミリ秒）。デフォルトは6000

stickyZoomEnabled

値がtrue→ズームモードの切り替えをせずに続けて使用できる。
値がfalse→一度ズームしたらズームモードは解除される。

あと３つ目のオプションでコールバックが設定できる。

• ズームボタンが押された時：buttonclick
• ドラックが開始された時：dragstart
• ドラック中：dragging
• ドラックされている座標：dragend

シンプルに使うだけだと必要ないと思うのでここでは割愛。
詳しくはDragZoom V1.0 Referenceで。

とても便利なんだけど、一度の拡大幅が多いので逆に広域地図まで戻るのがちょっとメンドクサイ。コールバックを使ってマイナス方向に戻した時にズームアウトできればいいなぁと思いつつ、僕自身のやりたい事リストに入れては見るが、いつ実現するかは不明。

アドセンスのリンクユニットがいつの間にか、1ページ内3つまでOKになっていた。全く気づきませんでした。
1ページに複数のリンクユニットを掲載できますか。Google Adsense ヘルプセンター
これで1ページ内に貼ってもいい広告は

• 広告ユニット×3
• リンクユニット×3
• 検索ボックス×2
• 紹介ユニット×3（製品毎）

紹介の製品もGoogle Checkout（オンラインショッピング）とGoogle Apps（Gmail等のサービス）が追加。Google Checkoutに掲載されている商品はアメリカがメインなので、日本のユーザーにはまだ縁がないかもしれない。

台湾の商品も見つからなかったが、こちらではまともなオンラインショッピングの仕組みがないので、結構流行るかも。

ところで、Adsense日本版公式ブログが使えないと思っているのは僕だけでしょうか・・・？