Карты Google в динамически загружаемом аккордеоне jquery - PullRequest
Новая
       11

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

1 голос
/ 14 мая 2010

Я пытаюсь загрузить карту 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 Если я закомментирую строку карты, все будет работать нормально (кроме самой карты).

Ответы [ 2 ]

1 голос
/ 06 мая 2011

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

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

Таким образом, я сохраняю все «map» и «marker» (терминология 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);
            }
        });
    })
}
0 голосов
/ 30 марта 2011

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

...