私は自分の基準でうまくやった!関数などの基本以外の JS の知識はほとんどありません。これらのページを使用して、SimpleModal フレームワークを使用して Google マップをモーダルにロードする作業スクリプトをまとめました。安心して動作しましたが、シフトできない最後のバグが1つあります。モーダルは HREF の最初のクリックで読み込まれますが、モーダルを閉じてから再度開いてみると、マップの一部が欠落しているモーダルが読み込まれます。マップの欠落の問題は、私がすでに解決したと思っていた問題でした。私のJSは
var map;
var src = 'https://sites.google.com/site/bristol2monaco/kml/route2.kml';
function initialize() {
var myLatlng = new google.maps.LatLng(51.337890,-0.813049);
map = new google.maps.Map(document.getElementById("basic-modal-content"), {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
clickable: false,
preserveViewport: true,
map: map
});
}
initialize();
「クリック」を登録するjsファイルには次が含まれます。
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#table .newbasic').click(function (e) {
$('#basic-modal-content').modal();
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
return false;
});
});
私が思っていたように、私はすでに欠けている地図のバグを(ここに投稿された解決策を使用して)ここの解決策の上にある(マップ、サイズ変更)行で解決していると思っていました。マップなどを再初期化する必要がありますか。アドバイスありがとうございます。