Jquery mobile maps & Microdata on iPhone app

问题

I have been using 'microdata' and query maps ([example])1 to show some markers on my app. Everything is working well on the web or local preview, but when using the simulator or iPhone the markers aren't appearing.

Would there be anything that is stopping the data displaying on an iOS device?

It also seems to be breaking the home button. Few extracts below:

    <!-- !Maps ===================== -->
<script src="_config/microdata.js" type="text/javascript"></script>

<script type="text/javascript">
    $('#gmap').live('pageshow', function(){

      $('#map_canvas').gmap({
        'center': new google.maps.LatLng(cc_maps_lat, cc_maps_long), 
        'navigationControl': cc_map_navcontrol,
        'mapTypeControl' : cc_maps_controltype, 
        'streetViewControl': cc_streetView,
        'zoom':cc_maps_zoom,
        'callback': function () {
                    $('#map_canvas').gmap('loadMetadata', 'microdata', 'http://data-vocabulary.org/Organization', function(i, item, result) {
            var latlng = new google.maps.LatLng(result.properties.geo[0].properties.latitude[0], result.properties.geo[0].properties.longitude[0]);
            $('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': latlng, 'animation': google.maps.Animation.DROP }, function(map, marker){

                var content = '<div class="iw"><h1 class="iw-name">'+result.properties.name[0]+'</h1><p class="iw-tel">'+result.properties.tel[0]+'</p><div class="clear"><div></div>';

              var iw = $('#map_canvas').gmap('addInfoWindow', { 'position':marker.getPosition(), 'content': content }, function(iw) {
                $(marker).click(function() {
                 iw.open(map, marker);
                 map.panTo(marker.getPosition());
                                });                                                                                                               
                            });
                            $(item).addClass('clickable');
                            $(item).click(function() {
                                $(marker).triggerEvent('click');
                                return false;
                            });
                        });                                                                  
                    });
        }
       });

       $("#mapdata").listview('refresh');
    });
</script>

<div id="gmap" data-role="page" data-theme="z">
    <div data-role="header" data-position="fixed" data-theme="z">
        <h1>Maps</h1>
        <a href="#home" data-icon="home" class="ui-btn-right" data-iconpos="notext" data-transition="slidedown" data-theme="x" data-ajax="false">Home</a>
    </div>
    <div data-role="content"> 
        <div style="padding:5px;">
            <div id="map_canvas" style="height:300px;"></div>
            <ul data-role="listview" data-theme="z" data-inset="true" id="mapdata"></ul>
        </div>
    </div>
</div>

* Update I am getting an error within Xcode when trying this via simulator:

2011-09-15 10:00:02.107 NASMA[16966:f503] PhoneGapDelegate::shouldStartLoadWithRequest: Received Unhandled URL about:blank

来源：https://stackoverflow.com/questions/7402698/jquery-mobile-maps-microdata-on-iphone-app