map = format.read(wmc_doc, {map: "map"});
これの動作は、id が map の <div> に新しい地図が挿入されるため、元の地図が表示されたままで、その下に表示されます。
元の地図を削除するためのコードを含んだ function loadSuccess のコードは次のようになります。
function loadSuccess(request){
var wmc_doc = request.responseText;
map.destroy();
map = format.read(wmc_doc, {map: "map"});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomToMaxExtent();
}
マップコントロールの表示は、地図がどのように表示されているかを理解するために有効です。
レイヤは設定されていますが、スケールの単位はメータでマウスポジションの単位もメータです。
地図の範囲は、拡大されていますが、表示できる範囲です。
マップのオプションがほとんど設定されていないようです。
OpenLayers.Formt.WMC の Class Documentation の Function -> Parameter -> options に次のように記述されていました。
options {Object} The options object must contain a map property. If the map property is a string, it must be the id of a dom element where the new map will be placed. If the map property is an OpenLayers.Map, the layers from the context document will be added to the map.
訳してみると、
options {Object}
options オブジェクトは、map プロパティを含んでいなければなりません。map プロパティが文字列なら、新しい map が設置される DOM エレメントの id でなければなりません。map プロパティが OpenLayers.Map なら、context ドキュメントから作成されたレイヤは map に追加されます。
とあります。そこで、次のようにコードを修正したら地図が表示されました。
map = format.read(wmc_doc, {map: new OpenLayers.Map("map", options)});
