Google maps 使用jQuery Mobile 1.4.2在listview单击后加载Google地图

我试图在一个单页JQM项目中显示一个Google地图

地图需要在listview剪辑后显示，以加载带有地图的新页面

型号：

public class address
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

脚本：

// listview events
$(".address").on("click", function ()
{
    var addressId = this.id;
    var addressPage = "#address";

    addressRequest(addressPage, addressId);
});

function addressRequest(page, addressId)
{
    var $page = $(page);

    $.ajax({
        type: "GET",
        url: urlBase + "/GetAddress",
        crossDomain: false,
        beforeSend: function () { $.mobile.loading('show') },
        complete: function () { $.mobile.loading('hide') },
        data: { addressId: addressId },
        dataType: 'json',
        success: function (address)
        {
            addressBuild(page, address);
            addressLoad(page);
        },
        error: function () {
            console.log("loadList error!");
        }
    });
}

function addressBuild(page, address)
{
    var $page = $(page);

    $(".ui-content", $page).append('<p>' + address.Name + '</p>');

    var centerLatLng = new google.maps.LatLng(address.Latitude, address.Longitude);

    addressLoadMap(centerLatLng);
}

function addressLoad(page)
{
    var $page = $(page);

    $.mobile.pageContainer.pagecontainer("change", $page, { transition: "slide" });
}

function addressLoadMap(latlng)
{
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

知道发生了什么吗

---

谢谢。

我发现了问题，我正在将地图加载到，但容器尚未加载

我只能在显示页面时加载地图：

$(document).on("pageshow", "#address", function ()
{
    addressLoadMap();
});

---

你能给我一个链接到这个页面吗？嗨，谢谢，你指的是哪一页？包含上面代码的页面？我没有在线的，只有在我的笔记本电脑里，你还需要什么？添加更多细节。一个jsiddle演示。您谈论listview…代码中没有listview。ajax响应包含什么？

    <style>
        #map-canvas {
            width: 100%;
            height: 100%;
            padding: 0;
        }
    </style>

    <!-- page address -->
    <div data-role="page" id="address">

        <div data-role="header" data-position="fixed"><h1>mobile</h1></div>

        <div class="ui-content" role="main">
            <div id="map-canvas"></div>
        </div>

    </div>

Uncaught TypeError: Cannot read property 'offsetWidth' of null

$(document).on("pageshow", "#address", function ()
{
    addressLoadMap();
});