Sometimes it works....sometimes, it doesn't. Very strange.
I've written a JQuery Mobile Application and one part of the app accesses Google Maps to display a map for a specific, user-chosen location. This code executes correctly about 50% of the time. Works great...just like I want it to. The other 50% of the time, however, the application crashes. By crash, I mean the application "halts" abruptly and then shuts down. There are no warnings or error messages. The application is no longer running, anymore. My architecture is this: MVC 2.0 using Master Pages. JQM Beta 3, Google Maps API v3. The application is a web application, using the technologies I just mentioned, however it is running inside the web browser Safari, inside an installed "native" iPhone application. When the application crashes, as I mentioned above, it is the native iPhone application that is crashing. Debugging/Troubleshooting: I can run the application, successfully, 100% of the time, with no crashing by just using the native browser Safari on the mobile device and navigating to the web application running on the web server. It's only when I launch the "installed" "native" iPhone application and have the native application navigate to the very same web application running on the very same web server and then navigate to the maps portion of the app that the behavior I explained in the first paragraph occurs. I'm currently seeking to retrieve and analyze the "Crash Report" that is generated natively on the iPhone device, but I don't have any helpful information from that Crash Report as of yet.
I'm using a fairly simple implementation of Google Maps, with some pretty basic, standard code:
<script type="text/javascript">
$('#gmap-2').live("pageshow", function () {
initMap();
});
function initMap() {
var latlng = getLatLng();
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
functi开发者_如何转开发on getLatLng() {
var latitude = "<%: Model.Latitude %>"; // "32.931962";
var longitude = "<%: Model.Longitude %>"; //"-96.789191";
var TSlatlng = new google.maps.LatLng(latitude, longitude);
return TSlatlng;
}
</script>
<div data-role="content" data-theme="c">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding: 1em;">
<div id="map_canvas" style="height: 300px;">
</div>
</div>
</div>
The "header" looks like this:
<!-- google maps api script -->
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- core jQuery -->
<script src="../../../../Scripts/jquerymobile/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<!-- core jQuery Mobile -->
<!-- BETA 3 -->
<script src="../../../../Scripts/jquerymobile/js/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>
</head>
I solved this problem. I wanted to post the solution here for completeness. The root cause was not in the JQuery or JQuery Mobile...nor was it in the HTML or CSS. The root cause was a memory issue in the "native" portion of the iPhone app (buried in the Objective C). The illegal memory access code was stripped from the source and now all is well. The Google Maps render as they were designed.
精彩评论