ユーザーが検索条件に基づいて動的に関心のあるポイントをフィルタリングできるようにする PHP スクリプトによって決定された場所にマップ上のマーカーをロードする Google マップの実装を使用します。これは、php 検索スクリプトへの ajax 呼び出しで行われます。これらのマーカーには、別の php スクリプトにアクセスすることによって、サイトに関する詳細情報が動的に読み込まれる infoWindow が添付されています。マーカーの作成中に、次のコードを使用します。
// Initialize the info window
var InfoWindow = new google.maps.InfoWindow({ content: 'Display Error: Please Try Again', maxWidth: 400 });
// Lots of code to prep the search filters and now inside an $.ajax().done(function(html) { $('#ajaxStub div.stubCalc').each(function() { } }) method
var newMarker = new google.maps.Marker({
position: latlon,
icon: $(this).find('.iconStub').text(),
title: $(this).find('.nameStub').text(),
map: gmap
});
// onClick show the InfoWindow
google.maps.event.addListener(newMarker, 'click', function(e) {
InfoWindow.content = $('<div class="projectStub" guid=""></div>').attr('guid', guid).get(0);
InfoWindow.open(gmap, newMarker);
// loadStub(div, guid, [isToolbox], [callback()]) is defined in CalcInfo.js so that it can also be used by the Calculator Toolbox Page
loadStub($('div.projectStub[guid="' + guid + '"]').get(), guid, false, function() {
InfoWindow.setContent(InfoWindow.content);
});
});
また、loadStub メソッドは最初の ajax 呼び出しを行い、ファイル アップロードの ajax 呼び出しを準備します (したがって、この情報ウィンドウの内容は非常に動的です)。
function loadStub(project, guid, isToolbox, callback) {
if (typeof(isToolbox) === 'undefined') isToolbox = false;
$(project).html('<img src="/Styles/images/ajax-loader.gif"/>');
$.ajax({
url: "/ajax.php?ajax=CalcInfo",
type: "POST",
data: { guid: guid, isToolbox: isToolbox.toString() },
cache: false
}).done(function(html) {
$(project).html($(html).html());
$(project).find('#fileInput').change(function() {
// More code here to prepare for ajax upload
$.ajax({
url: "/ajax.php&ajax=Thumbnail&guid=" + guid,
type: "POST",
data: formdata
}).done(function(html) {
if ($(html).find('#ajaxContent .error').length > 0) {
var errorMessage = 'The Server Returned the Following Error(s):\n';
$(html).find('#ajaxContent .error').each(function() {
errorMessage += $(this).text() + '\n';
});
errorMessage += 'Please Try Again';
alert(errorMessage);
}
}).fail(function() {
alert('There Was an Error Connecting to the Server. Please Try Again.');
}).always(function() {
loadStub();
});
});
if (typeof callback == 'function') {
callback();
}
}).fail(function() {
$(project).html('<div style="margin: 75px 0; text-align: center;">There Was an Error Connecting to the Server<br/>Please Try Again</div>');
});
}
InfoWindow.content を割り当てる代わりに setContent メソッドを使用すると、Google マップが InfoWindow のサイズを適切に調整することを確認できましたが、InfoWindow.open を使用した場合のデフォルトのように、InfoWindow のコンテンツに合わせてマップをパンしません。 (). まともな回避策を知っている人はいますか?
何か明確にする必要がある場合は、お知らせください。
前もって感謝します。