C# プログラムへの PageMethod 呼び出しによって作成された div に Google マップを表示しようとしています。Pagemethod は生成された html コードを返します。これは、jquery コマンド $('.showitems').html(somecode); で私の Web ページに挿入されます。このコードには、Google マップを配置する div が含まれていますが、javascript を実行して Google マップを作成すると、div がスペースに置き換えられ、マップは置き換えられません。ただし、マップを含めるために div をハードコーディングすると、Google マップを作成するための JavaScript が機能します。私の質問は、動的に生成された HTML コードを使用して Google マップを作成できないのはなぜですか? 以下は、動的に生成された div を除いて何年も機能している Google マップを作成するための私のコードです。
function ShowDinerItems(dinerkey) {
document.getElementById('HiddenDinerID').value = dinerkey;
var latitude = document.getElementById("Hiddenlat").value;
var longitude = document.getElementById("Hiddenlng").value;
location = document.getElementById("LocationText").textContent;
PageMethods.CallShowDinerItems(dinerkey, latitude, longitude, location, OnShowDinerComplete, OnShowDinerError, dinerkey);
}
function OnShowDinerComplete(result, dinerkey) {
$('.showitems').html(result[0]);
}
上記の showitems エリアには、以下に示すように、クリックしてマップを取得するためのスパン エリアがあります。
<span style="cursor:pointer" onclick=\"DisplayDinerMap('40.0912345', '89.12345', `'m0001', 'diner name')\"> Map </span>`
<div id="m0001" style="height:200px; width:200px;display:inline">map</div>
動的に生成された div マップは、「m001」が map1 の ID である showitems div で次のようになります。
function markDiner(lat, lng, content, map1) {
map = new google.maps.Map(document.getElementById(map1), {
zoom: 14,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
animation: google.maps.Animation.DROP,
title: content
});
}
ユーザーが地図のリンクをクリックした後、Map 関数を呼び出します。デバッグ モードでは、実行が Map ルーチンを通過することがわかります。
function DisplayDinerMap(lat, lng, map1, dinername) {
markDiner(lat, lng, dinername, map1);
}
map1 がハードコードされている場合、Google マップは機能します。PageMethod の呼び出しから動的に生成された場合、マップは表示されず、代わりにコード化したリテラルの上にスペースが表示され、それがなくなるかどうかを確認します。上記の例では、地図を表示しようとすると「地図」というテキストが消えてしまいます。アドバイスや提案をいただければ幸いです。