2
問題は、Googleマップを搭載したモーダルブートストラップを開くときです。このページでGoogle Maps APIを複数回使用する - モーダルブートストラップ戻るJson Success
モーダルブートストラップ - _Edit.cshtml
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Editar</h4>
</div>
@using (Ajax.BeginForm("Edit", "Account", new AjaxOptions { HttpMethod = "POST", OnSuccess = "onModalSuccess" }, new { @id = "ModalformId", @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="col-xs-6">
@Html.LabelFor(m => m.GoogleMaps_Link)
@Html.TextBoxFor(m => m.GoogleMaps_Link, new { @id = "pac-input", @class = "controls", @readonly = true })
<br />
<div id="map-canvas" class="Help_GoogleMaps" style="width:865px;height:380px;" title="Edit"></div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
@*Success Message Modal*@
<div id="ModalMsgBoxId" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<strong id="ModalTitleId" style="margin-left: 6px; font-size: 16px;"></strong>
</h4>
</div>
<div class="modal-body">
<p>
<div id="ModalContentId" style="margin-left: 6px; font-size: 16px;"></div>
</p>
</div>
<div class="modal-footer">
<button id="normalOkId" type="button" class="btn btn-success" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
}
// Google Maps Search
<script>
$(document).on("shown.bs.modal", function() {
if (window.google && window.google.maps) {
initAutocomplete();
return;
}
$script = $("<script>",
{
'type': 'text/javascript',
'src': 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&libraries=places&callback=initAutocomplete'
});
$script.appendTo($("head"));
});
function initAutocomplete() {
var LatLong = @Html.Raw(JsonConvert.SerializeObject(Model.Geo));
var LatLongSplit = LatLong.split(" ");
var lat = LatLongSplit[0];
var long = LatLongSplit[1];
//var Lat = (-23.5326148);
//var Long = (-46.803688);
var Endereco = @Html.Raw(JsonConvert.SerializeObject(Model.GoogleMaps_Link));
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(lat, long),
zoom: 11,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markerLatLong = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: Endereco
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
//Clear Markers
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
markerLatLong.setMap(null);
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// [END region_getplaces]
}
var onModalSuccess = function(result)
{
if (result.EnableError)
{
// Clear.
$('#ModalTitleId').html("");
$('#ModalContentId').html("");
// Setting.
$('#ModalTitleId').append(result.ErrorTitle);
$('#ModalContentId').append(result.ErrorMsg);
// Show Modal.
$('#ModalMsgBoxId').modal(
{
backdrop: 'static',
keyboard: false
});
}
else if (result.EnableSuccess)
{
// Clear.
$('#ModalTitleId').html("");
$('#ModalContentId').html("");
// Setting.
$('#ModalTitleId').append(result.SuccessTitle);
$('#ModalContentId').append(result.SuccessMsg);
// Show Modal.
$('#ModalMsgBoxId').modal(
{
backdrop: 'static',
keyboard: false
});
// Resetting form.
$('#ModalformId').get(0).reset();
}
}
</script>
コントローラ
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(EditModel model)
{
if (ModelState.IsValid)
{
return this.Json(new { EnableSuccess = true, SuccessTitle = "Success", SuccessMsg = "Success" });
}
retur PartialView (_Edit, model);
}
問題は部分図です。ただ警告を表示してください！以下のコードで
：
<div id="ModalMsgBoxId" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<strong id="ModalTitleId" style="margin-left: 6px; font-size: 16px;"></strong>
</h4>
</div>
<div class="modal-body">
<p>
<div id="ModalContentId" style="margin-left: 6px; font-size: 16px;"></div>
</p>
</div>
<div class="modal-footer">
<button id="normalOkId" type="button" class="btn btn-success" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
画像：
問題がモーダル成功で、それはGoogleマップは失敗しますありません。どうすれば修正できますか？
ありがとうございます。
私はタブで同じ問題があった。タブがナビゲートされると、非表示のタブ上のGoogleマップは表示されません。私はモーダル表示イベントでマップを初期化しなければならないと思います。 – Leeish
@Leeish私は理解していませんでした、あなたはサンプルコードを与えることができますか？ –
申し訳ありません。私は私の電話にいます。私はあなたがそれをやっていたところを逃しました。私は後でもっと見る必要があります。 – Leeish