JQuery Accordion и Google Maps - не проблема с центрированием / отображением карты - PullRequest
Новая
       18

JQuery Accordion и Google Maps - не проблема с центрированием / отображением карты

1 голос
/ 07 декабря 2011

http://i.stack.imgur.com/lxb7P.jpg

Выше приведены ссылки на три вкладки, созданные с помощью JQuery UI Accordion. Третий (который открыт на картинке) содержит встроенную карту Google. Пустой красный прямоугольник - это место, где должна появиться карта. Вышеуказанная ошибка присутствует только в Safari, я не мог воспроизвести ее в любом другом браузере.

Карта обернута в div, называемый холст карты 

<h3 id="pasek3"><a href="#"></a></h3> // third tab
<div id="content_wrap">
<div id="podPaskiem3"> // under the panel
<p id="lewo1"> // left half
CONTACT/ADRESS DETAILS
</p>
<p id="prawo2"> // right half
<div id="mapCanvas"></div>
</p>
</p>
</div>
</div>
<!--content_wrap--></div >

Это свойства divs 

mapCanvas {
border:  0;
width:  500px;
height:  350px;
margin:  0 auto;
}

Вот скрипт, отвечающий за отображение и центрирование карты после открытия третьей вкладки: 

<script>
var map = null;  
var latlng = new google.maps.LatLng(52.2729782, 20.9861867);
function initializeMap() {
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map($('#mapCanvas')[0], myOptions);
}
    // Function for adding a marker to the page.
    function addMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }
    // Testing the addMarker function
    function TestMarker() {
            CentralPark = new google.maps.LatLng(52.2729782, 20.9861867);
            addMarker(CentralPark);
    }
$(document).ready(function() {
    $("#accordion").accordion();

    $("#accordion").bind('accordionchange', function(event, ui) {
        if (ui.newContent.attr('id') == 'content_wrap' && !map)
        {
            map = initializeMap();
                 TestMarker();
        }
    });
});
  </script>
...