Использование Fancybox с Google Static Maps - PullRequest
Новая
       14

Использование Fancybox с Google Static Maps

0 голосов
/ 04 апреля 2010

Настройка

  • У меня есть несколько ссылок на страницу с классом location_link
  • Каждый атрибут Связи rel равен комбо-штату города (т. Е. Omaha, NE)
  • После загрузки страницы функция JavaScript проходит по всем элементам location_link и связывает с ними событие click с помощью jQuery.
  • Это событие щелчка запускает вызов конструктора Fancybox, который должен показать Google Map местоположения, с которым связана ссылка

Проблема:

Всякий раз, когда я нажимаю на одну из «ссылок на места», я получаю следующее сообщение об ошибке:

Запрошенный контент не может быть загружен. Пожалуйста, попробуйте позже.

Код, который я уже написал: 

function setUpLocationLinks() {
    locationLinks = $("a.location_link");
    locationLinks.click(
        function() {
            var me = $(this);
            console.log(me.attr("href"));
            $.fancybox(
                {
                    "showCloseButton" : true,
                    "hideOnContentClick" : true,
                    "titlePosition"  : "inside",
                    "title" : me.attr("rel"),
                    "type" : "image"
                }
            )
            return false;
        }
    );
}

Исследования, которые я уже провел:

Примечание. API статических карт Google больше не требуется ключ API Карт! (Вместо этого клиенты Google Maps API Premier должны подписывать свои URL-адреса с помощью нового криптографического ключа, который будет вам отправлен. Дополнительные сведения см. В документации Premier.)

  • URL-адрес изображения , который я использую, разрешает и извлекает нужные мне данные
  • Когда я помещаю вышеупомянутый URL в стандартный тег image, карта отображается очень хорошо.
  • Я бы хотел выполнить это без необходимости создания какого-либо фиктивного тега image, из которого я постоянно выключаю атрибут src.

Надеюсь, вы найдете эту информацию полезной. Пожалуйста, дайте мне знать, если у вас есть другие вопросы.

1 Ответ

1 голос
/ 05 апреля 2010

Вот что я придумал. Он использует пустой тег image, но работает. Я бы хотел, чтобы кто-то придумал более изящное решение. 

function setUpLocationLinks() {
    var locationLinks = $("a.location_link");
    var mapImage = $("#map_image");
    var mapImageContainer = $("#map_image_container");
    var mapFancybox = function() {
        $.fancybox.hideActivity();
        $.fancybox(
            {
                "showCloseButton" : true,
                "hideOnContentClick" : true,
                "titlePosition"  : "inside",
                "content" : mapImageContainer.html()
            }
        );
    }
    locationLinks.click(
        function() {
            var clickedLink = $(this);
            $.fancybox.showActivity();
            mapImage.attr("src", clickedLink.attr("href")).load(
                function() {
                    mapFancybox();
                }
            );
            if(mapImage.complete) {
                mapImage.triggerHandler("load");
            }
            return false;
        }
    );
}
...