Blank Google Map in iPhone with jQuery Mobile

问题

I'm getting a blank google map when I load a page in a Single Page jQuery Mobile Application from a listview:

Listview page:

<div data-role="page" id="addresses">
    <div data-role="header" data-position="fixed"><h1>mobile</h1></div>
    <div class="ui-content" role="main">
        <ul data-role="listview">
          <li><a href="" id="345" class="address">Paris</a></li>
          <li><a href="" id="456" class="address">London</a></li>
        </ul>
    </div>
</div>

Address page

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

Script to load the address page:

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

function addressLoadMap()
{
    var latitude = $("#latitude").val();
    var longitude = $("#longitude").val();

    var centerLatLng = new google.maps.LatLng(latitude, longitude);

    var myOptions =
        {
            zoom: 16,
            center: centerLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false
        };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: centerLatLng,
        map: map
    });
}

I works fine in ripple simulator, but in iPhone it gets like this:

回答1:

I found the problem, using an Application on the iPhone to access the console log messages, I was able to discover that in the iPhone, the latitude and longitude coming from the MVC WebApi was converted in the wrong double format to build the map:

I had to change the model returned by the WebApi from:

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

to:

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

And problem solved.

来源：https://stackoverflow.com/questions/23315404/blank-google-map-in-iphone-with-jquery-mobile

标签

google-maps

jquery-mobile