JQuery-UI-карта не отображается при переходе из другого HTML-файла

Question

Это мой первый вопрос на StackOverflow, так нежна :)

Я сделать мобильный веб-приложения с помощью JQuery, JQuery мобильного и jQuery- ui-map плагин. Карта отлично работает, когда я обновляю файл, где он должен отображаться (map.html), но при навигации по index.html он вообще не появляется. Консоль не показывает erros. Я попытался сделать $ ('# map_canvas'). Gmap ('refresh'); на странице, но это тоже не работает. Кроме того, это запутывает панорамирование, когда я обновляю файл напрямую ...

Я также пробовал без предварительной выборки в нижнем колонтитуле и с данными-rel = "external" (что перепутало jQuery mobile styling)

Вот сноска навигация от index.html:

 <div data-role="footer" data-theme="a" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a data-transition="fade" class="txt_footer_href_home ui-btn-active" href="index.html" data-prefetch>Home</a></li> 
       <li><a data-transition="fade" class="txt_footer_href_offers" href="offers.html" data-prefetch>Offers</a></li> 
       <li><a data-transition="fade" class="txt_footer_href_store" href="store.html" data-prefetch>Store</a></li> 
       <li><a data-transition="fade" class="txt_footer_href_map" href="map.html" data-prefetch>Map</a></li> 
       <li><a data-transition="fade" class="txt_footer_href_more" href="more.html" data-prefetch>...</a></li> 
      </ul>  
     </div> 
    </div> 

А вот код карты:

$('#map_canvas').gmap({'maxZoom':17,'center': new google.maps.LatLng(center_latitude,center_longitude),'callback': function() { 
    var self = this; 
    // Get the current position 
    self.getCurrentPosition(function(position, status) { 
     // If we got the current position, add the marker 
     if (status === 'OK') { 
      // Stor current position in a var 
      var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      // Add the current position marker 
      self.addMarker({ id:'mark_pos','position': clientPosition, 'bounds': true}) 
      .click(function() { 
       $('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_my_position_content }, this); 
      }); 
      // Paint a blue cirecle where your position is 
      self.addShape('Circle', { 
       'strokeWeight': 0, 
       'fillColor': "#008595", 
       'fillOpacity': 0.25, 
       'center': clientPosition, 
       'radius': 15, 
       'clickable': false 
      }); 
      // Bind direction marker button and show it 
      $("#divBtnDirection").show(); 
      var that = this; 
      $("#btn_directions").click(function() { 
       that.displayDirections({ 'origin': clientPosition, 'destination':center_latitude+','+center_longitude , 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions') }, function(result, status) { 
       if (status === 'OK') { 
        $('#map_canvas').gmap('clear', 'markers'); 
        $("#divBtnDirection").hide(); 
        $("#directions").fadeIn(1000); 

       } 
      }); 

      });    
    } 
     // Add the shopping centers marker 

    self.addMarker({ id:'mark_center', 'position': center_latitude+','+center_longitude, 'bounds': true }).click(function() { 
       $('#map_canvas').gmap('openInfoWindow', { 'content': Lang.mapHtml.txt_marker_center_content }, this); 
      }); 
    }); 


}}); 

сайт в настоящее время отображается here (его на норвежском языке)

Спасибо!

Answer 1

Прежде всего Добро пожаловать в Stackoverflow .. :) Убедитесь, что ваша функция вызывается во время навигации. Попробуйте поместить в функцию сообщение и проверить.

А также попытаться поместить вызов функции отображения в головной секции вашего

$(function(){ 
//your function call 
}); 

Надеется, что это помогает ..