リーフレットマップの更新: マップコンテナはすでに初期化されています。

質問

私は、ユーザーに選択権を与えて、私が表示するリーフレットマップを切り替えることができるページを持っています。

最初のリーフレットマップのロード後、私の問題は、マップを更新したいときです。

Map container is already initialized"が常に表示されます。

問題の行は

var map = L.map('mapa').setView([lat, lon], 15);

最初はうまく読み込めますが、フォームで別のパラメータを選択し、別の時間に地図を表示しようとするとクラッシュします。

を破壊して再作成してみました。 $('#mapa') の前にjQueryで setView() を追加しましたが、同じエラーが表示されます。

どのように解決するのですか？

Htmlです。

<div id="weathermap"></div>

JavaScriptです。

function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                        ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('map');
    map.setView(new L.LatLng(lat,lon), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);
}

私はこれを使っています。

document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";

で、マップをレンダリングしているdivの内容を再読み込みします。