En utilisant Fancybox avec Google Maps statique

Question

Configuration

• J'ai plusieurs liens sur une page avec la classe location_link
• Chaque Liens rel attribut est égal à un combo d'état de la ville (c.-à-Omaha, NE)
• Une fois la page chargée, une fonction JavaScript parcourt tous les éléments location_link et lie un événement click à l'aide de jQuery.
• Cet événement clic déclenche un appel au constructeur Fancybox qui est censé montrer une carte Google de l'emplacement lien est associé à

Le problème:

Chaque fois que je clique sur l'un des les « liens » emplacement, je reçois le message d'erreur suivant:

le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard.

code Je l'ai déjà écrit:

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

recherche Je l'ai déjà fait:

• L'API Google Map statique ne nécessite une clé API. Ce qui suit est de la Google Static Maps API Page

Note: L'API Google Maps statique ne nécessite plus une clé API Maps! (API Google Maps clients Premier devraient plutôt signer leur URL à l'aide d'une nouvelle clé cryptographique qui sera envoyé. Consultez la documentation du premier ministre pour plus d'informations.)

• Le The Image URL J'utilise ne résout et récupère les données dont j'ai besoin
• Lorsque je mets l'URL mentionnée ci-dessus dans un tag <img> standard, la carte apparaît très bien.
• Je voudrais retirer ceci sans avoir à créer une sorte de balise <img> img que je change constamment l'attribut src sur.

Nous espérons que ces informations vous seront utiles. S'il vous plaît laissez-moi savoir si vous avez d'autres questions.

Answer 1

Voici ce que j'ai trouvé. Il utilise une balise vide <img>, mais cela fonctionne. J'aimerais voir quelqu'un trouver une solution plus gracieuse.

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