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

Question

Настройка

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

Проблема:

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

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

код Я уже писал:

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; 
     } 
    ); 
} 

исследований я уже сделал:

• Google Static Map API больше не требует ключа API. Ниже не из Google Static Maps API Page

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

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

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

Answer 1

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

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; 
     } 
    ); 
}