Chargement d'un iframe sur clic d'un déclencheur en utilisant jquery

Question

Je travaille sur un site basé sur un moteur de recherche qui utilise des iframes pour intégrer google maps sur chaque résultat du moteur de recherche. Le problème est que la plupart des utilisateurs ne se soucient pas de voir une carte, et de charger 20 iframes sur chaque page de résultats de recherche lorsque les chances de voir plus d'un d'entre eux sont minces, est mauvaise car ralentit le temps de chargement du site. J'essaye de charger le iframe qui est dans un récipient avec la classe "address-popup" seulement sur le clic d'un déclencheur avec le "lien d'adresse". J'ai placé l'affichage de l'iframe à none dans mon css, bien qu'il semble toujours charger, même avant qu'il soit visible.

code de déclenchement:

<span class="address-link">Address</span> 

code iframe:

echo '<div class="address-popup"> 
      <iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> 
     </div>'; 

Answer 1

Vous pouvez avoir tout le code de l'iframe dans le javascript. Si vous aimez utiliser jQuery, cela le ferait:

$('.address-link').click(function(){ 
    $('.address-popup').html('<iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>'); 
}); 

Une façon d'être peut-être de définir plus spécifique l'identifiant du conteneur cible avec un attribut de données, comme suit:

HTML

<span class="address-link" data-target-id="target-div-7">Address</span> 
<div id="target-div-7"></div> <!-- target div --> 

jQuery

$('.address-link').click(function(){ 
    var targetId = $(this).data('target-id'); 
    $('#' + targetId).html('<iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>'); 
}); 

Ainsi, pour chaque déclenchement, vous pouvez définir l'ID cible en tant que données attribut e, et vous pouvez utiliser le même script.

Answer 2

Pourquoi utiliser les iframes? Vous pouvez simplement charger une carte Google directement dans un DIV "pop-up" commun, puis centrer cette carte à l'adresse sélectionnée avec chaque clic de lien. Cela fonctionnerait probablement beaucoup mieux que le chargement de pages HTML entières.

Voici un exemple de travail à partir d'une preuve de concept où j'ai aidé un ami à mettre en œuvre la fonctionnalité javascript/maps.

http://184.106.239.214/pacific_grove_zoning/ 

Regardez simplement comme le code source. Vous pouvez voir les modifications de la carte en commençant simplement à taper une adresse ("1234 ..", "1000 ...", etc.) dans le champ de saisie semi-automatique, puis en sélectionnant une adresse.

est ici la partie principale de javascript sur ce site qui est pertinent pour la fonctionnalité Google Maps

function map_initialize() { 
    // instantiate google map 
    var initialLatlng = new google.maps.LatLng(37.4328, -122.077); 
    var initialOptions = { 
     zoom: 18, 
     center: initialLatlng, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    } 
    map = new google.maps.Map(document.getElementById('property_map'), initialOptions); 
    geocoder = new google.maps.Geocoder(); 
} 

function map_to_address(address) { 
    if (marker != undefined) { 
     marker.setMap(null); 
    } 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     // map.fitBounds(results[0].geometry.bounds); 
     marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Unable to map provided address. Error: " + status); 
     } 
    }); 
}