此页面上的Google Maps API多次-Modal Bootstrap Return Json Success

Question

The problem is when I open modal bootstrap which carries Google Maps.

Modal Bootstrap - _Edit.cshtml

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>

Controller

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit(EditModel model)
    {
        if (ModelState.IsValid)
        {
            return this.Json(new { EnableSuccess = true, SuccessTitle = "Success", SuccessMsg = "Success" });
        }
retur PartialView (_Edit, model);
    }

The problem is in partial view. Just show a warning!

With the code below:

<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>

Picture:

The problem is modal Success, does it make Google Maps fail. How can I fix?

Thank you guys.

Answer 1

I solved the problem in another way. Using Bootstrap Alert.

Link: Alerts - Bootstrap

Remove code:

<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>

New code:

<center><div id="result"></div></center>

javascript:

$("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Successfully updated record!</div>');

Now it works! I took example link: here