Карты Google в динамически загружаемом jquery Accordion

Я пытаюсь загрузить карту Google в аккордеон jquery ui с содержимым, загруженным ajax.

 $("h2", "#accordion").click(function(e) {
  var contentDiv = $(this).next("div");
  if (contentDiv.children().length == 1)
  {
   contentDiv.load($(this).find("a").attr("href"));
   contentDiv.ready(function(){
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
     zoom: 8,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   })
  }
 });

Это мой текущий код (Google Maps API V3), но он перенаправляется на URL-адрес href, когда я нажимаю в данный момент, очевидно, без карты Google, потому что в этом ответе нет javascript. Если я закомментирую строку карты, все будет работать нормально (кроме самой карты).


google-maps jquery ajax jquery-ui
person marr75    schedule 14.05.2010    source источник
comment
Можете ли вы предоставить связанный HTML? Похоже, вы, возможно, не предотвращаете действие по умолчанию или возвращаете false при нажатии на ссылку h2 ›...   -  person Andrew    schedule 14.05.2010

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, ветка мертва, но, поскольку я потерял несколько часов на аналогичную проблему, я хочу поделиться своим решением. У меня есть аккордеон jqueryui с googlemap на каждой панели.

Проблема в том, что у аккордеона нет размера для скрытых панелей, и googlemaps использует этот размер для отображения карт.

Поэтому я сохраняю каждую «карту» и «маркер» (терминология gmaps) в индексированном массиве (var maps), и когда пользователь меняет панель аккордеона, я «обновляю» соответствующую gmap. Загвоздка в том, что изменения размера события недостаточно, вам нужно принудительно увеличить масштаб для перерисовки, и даже в этом случае из-за размера, который он имел на закрытой панели, ваш маркер для этой карты полностью находится за пределами экрана, поэтому вы центрируете его на основе маркера должность.

$(document).ready(function(){
    if($('div.map_canvas').length>0) initializeMap(); //init map
    if($('#accordion').length>0) $("#accordion .items").accordion(); //init accordeon

    $("#accordion .items").bind("accordionchange", function(event, Element) {
        current=maps[Element.options.active];
        google.maps.event.trigger(current.map, 'resize');    //resize
        current.map.setZoom( current.map.getZoom() );        //force redrawn
        current.map.setCenter(current.marker.getPosition()); //recenter on marker
    })
});

var maps=Array();
function initializeMap() {
        var geocoder;
        $('div.map_canvas').each(function(index,Element) {
        var address = $(Element).text();
        var myOptions = {
            zoom: 15,
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                myOptions.center = results[0].geometry.location;
                map = new google.maps.Map(Element, myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                });
                maps.push({marker:marker,map:map}); //save those
            } else {
                alert('The address could not be found for the following reason: ' + status);
            }
        });
    })
}
person rodrigot    schedule 06.05.2011

arrow_upward
0
arrow_downward

До сих пор мне это не приходило в голову, но поскольку содержимое каждого аккордеона загружается динамически, это представляет собой незаконный межсайтовый запрос. Карта должна быть получена с моего собственного веб-сервера и передана в запрос ajax в аккордеоне, или карта google должна быть загружена один раз и манипулирована в dom загружаемых панелей аккордеона.

person marr75    schedule 30.03.2011
comment
Почему бы не использовать AJAX для PHP-скрипта и не свернуть карту? - person Nic; 30.03.2011
comment
Отредактировано, чтобы отразить ваш комментарий, PHP не был бы моим выбором для сценария, но в более широком смысле ajax для веб-сервиса в вашем собственном домене, который даст вам некоторое представление о карте. - person marr75; 30.03.2011
comment
Да, я сделал предположение (извините, я читаю/отвечаю в основном на вопросы PHP, ха-ха). Но да, я знаю, что это обычный обходной путь для этого. - person Nic; 30.03.2011