在jquery对话表单中显示google地图

Question

您好，我正试图在jquery对话中以我的形式显示一个地图，

我的jquery对话框返回了一个部分视图，我将这些代码放在@section脚本中，并调用了maps api

<script type="text/javascript">


$(document).ready(function () {
    Initialize();
});

// Where all the fun happens
function Initialize() {

    // Google has tweaked their interface somewhat - this tells the api to use that new UI
    google.maps.visualRefresh = true;
    var Liverpool = new google.maps.LatLng(53.408841, -2.981397);

    // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
    var mapOptions = {
        zoom: 14,
        center: Liverpool,
        mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
    };

    // This makes the div with id "map_canvas" a google map
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // This shows adding a simple pin "marker" - this happens to be the Tate Gallery in Liverpool!
    var myLatlng = new google.maps.LatLng(53.40091, -2.994464);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Tate Gallery'
    });

    // You can make markers different colors...  google it up!
    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

    // a sample list of JSON encoded data of places to visit in Liverpool, UK
    // you can either make up a JSON list server side, or call it from a controller using JSONResult
    var data = [
              { "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours": "9-5, M-F", "GeoLong": "53.410146", "GeoLat": "-2.979919" },
              { "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" },
              { "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" },
              { "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" }
    ];

    // Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
    $.each(data, function (i, item) {
        var marker = new google.maps.Marker({
            'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
            'map': map,
            'title': item.PlaceName
        });

        // Make the marker-pin blue!
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

        // put in some information about each json object - in this case, the opening hours.
        var infowindow = new google.maps.InfoWindow({
            content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>"
        });

        // finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });

    })
}

我调用div中的map：

<div id="map_canvas" style="height: 240px; border: 1px solid gray"> map here</div> 

但是问题是我的地图没有显示在对话框中，即使它在正常的页面上运行良好

有什么可以帮忙的吗!？

Answer 1

我已经用以下代码解决了这个问题：

这段代码位于主视图上，#next是要提交的表单的触发器，#对话框位于#表单内部。

$(function () {
    datepair();        
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        height: 720,
        width: 700,
        resizable: false,
        title: 'Verify Location',
        show: "fade",
        hide: "fade",
        open: function (event, ui) {
            var form = $('#form');
            $.ajax({
                url: form.attr('actoin'),
                type: form.attr('method'),
                data: form.serialize(),
                context: this,
                success: function (result) {
                    $(this).html(result);
                }
            });
        }
    });        

    $('#next').click(function (e) {         
        $('#dialog').dialog('open');
        return false;
    });
});

此代码位于partialView上

    $(function () {
    window.$required = $('<div></div>').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        title: 'Verity Location Error',
        buttons: {
            "Ok": function () {
                $(this).dialog('close');
                callback();
            }
        }
    });

    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (json) {
            Initialize();
        }
    });
    return false;
});

function callback() {
    $('#dialog').dialog('close');
}

function Initialize() {
    //init the map
}

这是控制器

public ActionResult PartialViewMapController()
    {           
        return PartialView();
    }

希望对你来说不会太晚:)