Карты Google не будут работать внутри вкладок пользовательского интерфейса jQuery. - PullRequest
Новая
       26

Карты Google не будут работать внутри вкладок пользовательского интерфейса jQuery.

4 голосов
/ 18 марта 2012

Я использую API JavaScript для Карт Google. Это довольно просто, у меня просто есть: 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>);
            var myOptions = {
              zoom: 14,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: myLatlng, 
                map: map,
                title:"<?php echo $get_music_spot['music_spot_title']; ?>"
            });   
          }
</script>

в шапке, тогда у меня <div style="width:600px; height:500px; float:left;" id="map_canvas"></div> в теле, чтобы на самом деле вызвать карту. Тогда, конечно, у меня есть <body onLoad="initialize()"> Это в основном все, что вам нужно для базовой карты. Но, потому что это внутри jQuery, например. JQuery UI вкладки это становится беспорядочным. Вот скриншот:

enter image description here

Вы видите, что в верхнем левом углу показан только фрагмент карты. Почему это произошло и как я мог это исправить? Я реализовал iFrame в качестве базового встраивания, но в IE это не работает.

1 Ответ

4 голосов
/ 18 марта 2012

Что касается того, почему это не работает, я не могу сказать вам, почему.Но попробуйте использовать одно из событий в виджете jQuery Tabs для инициализации карты, например, событие show или select. 

$('#myTabs').tabs({
    show: function(event, ui){

        // check if is "mappanel" and "map" is empty
        if (ui.panel.id == 'mappanel' && $('#map').is(':empty'))
        {
            // load map
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);      
        }
    }                    
});

Важно включить туда проверку, чтобы картане перезагружается каждый раз при выборе вкладки карты (или любой другой вкладки).

Посмотрите, как она работает на этом jsFiddle .

...