jQuery Mobile - Как реализовать Карты Google на внешних ссылках

Я пытаюсь использовать API Карт Google 3 с помощью jQuery Mobile и не могу загрузить внешние страницы для загрузки карты. Я проверил в Firebug, и кажется, что карта создается, но скрыта на странице. Я могу получить домашнюю страницу, чтобы загрузить карту успешно, и я могу получить внешние страницы для успешной загрузки карты с использованием атрибута rel = «external» в ссылке. Но для внешних страниц, не использующих rel = "external", карта не отображается.jQuery Mobile - Как реализовать Карты Google на внешних ссылках

Вот мой код:

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
</head> 

<body> 
    <div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role='listview' id='menu'> 
     <li><a href="pages/map.html">external map page (does not work)</a></li> 
     <li><a href="pages/map.html" rel="external">map page with rel=external (works)</a></li> 
    </ul> 
    </div> 

</div> 
</body> 
</html>

map.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Map</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

    <style type="text/css"> 

    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px } 

    </style> 

</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map_canvas"></div> 

    <script type="text/javascript"> 
     function initialize() { 
      var latlng = new google.maps.LatLng(40.716948, -74.003563); 
      //console.log(latlng); 
      var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 

     } 
     $(function() { 

      initialize(); 
     }); 

    </script> 

    </div> 
</div> 
</body> 
</html>

Как я могу получить карту Google, чтобы показать на внешнюю страницу без использования отн = "внешний"?

источник

2011-02-02 Greg

Я нашел решение. Мне нужно было инициализировать карту Google в событии jQuery Mobile для pagecreate, а не в $ (document) .ready. У меня также была проблема с полной картой, которая не отображается должным образом каждый раз, когда страница показывалась, поэтому я решил, что, перейдя по адресу google.maps.event.trigger (map, 'resize'), обновите карту на событии jQuery Mobile на странице «showhow».

Вот мой код:

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <style type="text/css"> 
     .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px } 
    </style> 
</head> 

<body> 
    <div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role='listview' id='menu'> 
     <li><a href="pages/map1.html">external map page 1</a></li> 
     <li><a href="pages/map2.html">external map page 2</a></li> 
    </ul> 
    </div> 

</div> 


</body> 
</html>

map1.html

<div data-role="page" class="page-map1"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map1" class="gmap"></div> 

    <script type="text/javascript"> 
     var map1, latlng1, options1; 
     function initialize() { 

      latlng1 = new google.maps.LatLng(40.716948, -74.003563); 
      options1 = { zoom: 14, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      map1 = new google.maps.Map(document.getElementById("map1"), options1); 

     } 
     $('.page-map1').live("pagecreate", function() { 

      initialize(); 

     }); 

     $('.page-map1').live('pageshow',function(){ 

      //console.log("test"); 
      google.maps.event.trigger(map1, 'resize'); 
      map1.setOptions(options1); 

     }); 

    </script> 

    </div> 
</div>

map2.html

<div data-role="page" class="page-map2"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map2" class="gmap"></div> 

    <script type="text/javascript"> 
     var map2, latlng2, options2; 
     function initialize() { 

      latlng2 = new google.maps.LatLng(40.716948, -74.003563); 
      options2 = { zoom: 14, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      map2 = new google.maps.Map(document.getElementById("map2"), options2); 

     } 
     $('.page-map2').live("pagecreate", function() { 

      initialize(); 

     }); 

     $('.page-map2').live('pageshow',function(){ 

      google.maps.event.trigger(map2, 'resize'); 
      map2.setOptions(options2); 
     }); 

    </script> 

    </div> 
</div>

источник

2011-02-03 00:37:07 Greg

jQuery Mobile - Как реализовать Карты Google на внешних ссылках

ответ

Смежные вопросы