Virtual Earth Map Controlで描かれたマップの余白部分の背景色は、Map Controlが勝手に色を変更するのでdivタグのstyleにbackground-colorを指定していてもその色が表示されません。
このベージュっぽい色の部分を別の色に変更する方法が、Virtual Earth, An Evangelist's Blogに載っていたのでさっそく試してみました。そしたら完全でなかったので、記事を元によりうまく動くように考えてみました。
内容はVEMapのonchangeviewイベント発生時に毎回マップを表示しているdivタグのスタイルを書き変えることをしています。これだけではマップ上でマウスホイールを動かしてズームしたとき、それ以上ズームアウトできない場合はイベントが発生しません。VEMapとしては何も変化していないので正しいのですが、Map Controlはこのときも背景色を書き変えてしまうので指定した色が戻ってしまいます。あと、マップロード時もイベントが発生しますが、書き変えた順でMap Controlに負けます。
そんなわけで、マウスホイールのイベントは自分でハンドルして、マップロード直後もイベント時とは別に自分で背景色を指定します。これでだいたい良い感じ。
元記事のコードも参考にしてくださいね。名前やら変えてますが処理として追加したのは「!」の部分です。ホイールイベントを関連付けているattachEventはIE用ですのでFirefoxにも対応するには修正が必要です。
var map = null;
var div = null;
function pageLoaded() {
div = document.getElementById("myMap");
map = new VEMap("myMap");
map.AttachEvent("onchangeview", viewChanged);
// !
div.attachEvent('onmousewheel', viewChanged); // (attachEvent is for IE)
map.LoadMap(new VELatLong(36.17463, -115.12330), 1);
// !
div.style.backgroundColor = color;
}
var color = "#B3C6D4";
function viewChanged(e) {
if (!div) return;
switch (e.mapStyle) {
case 'r':
color = "#B3C6D4";
break;
case 'h':
color = "#020514";
break;
default:
//
}
div.style.backgroundColor = color;
} これを実行するとこんな感じ。
良い感じです。
（via Virtual Earth, An Evangelist's Blog : Change Virtual Earth Background Color）