jquery를 사용하여 트리거 클릭시 iframe로드

Question

iframe을 사용하여 각 검색 엔진 결과에 Google지도를 포함시키는 검색 엔진 기반 사이트에서 작업하고 있습니다. 문제는 대부분의 사용자가지도를 보는 것에 신경 쓰지 않으며, 1 개 이상의 조회 가능성이 매우 희박 할 때 모든 검색 결과 페이지에 20 개의 iframe을로드하는 것은 사이트의로드 시간을 늦추므로 좋지 않습니다. "주소 링크"가있는 트리거를 클릭 할 때만 클래스 "주소 팝업"이있는 컨테이너 안에있는 iframe을로드하려고합니다. 내 CSS에서 iframe의 표시를 none으로 설정했지만 표시되기 전에도 여전히로드 된 것처럼 보입니다.

트리거 코드 :

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

은 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

당신은 자바 스크립트의 모든 iframe 대응의 코드를 가질 수 있습니다. 당신이 jQuery를 사용하여 좋아하는 경우에,이 그것을 할 것입니다 :

$('.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>'); 
}); 

한 가지 방법을 더 구체적가되는과 같이, 데이터 속성과 대상 컨테이너의 ID를 정의 할 수 있습니다 :

HTML

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

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

그래서 모든 트리거를 들어, 데이터 attribut로 대상 ID를 정의 할 수 있습니다 e, 동일한 스크립트를 사용할 수 있습니다.

Answer 2

iframe을 사용하는 이유는 무엇입니까? 일반적인 "팝업"DIV에 직접 Google지도를로드 한 다음 각 링크를 클릭 할 때 선택한 주소로지도를 중앙에 배치 할 수 있습니다. 이렇게하면 HTML 페이지 전체를로드하는 것보다 훨씬 나은 결과를 얻을 수 있습니다.

여기 내 친구가 javascript/maps 기능을 구현하는 데 도움이 된 개념 증명의 실제 예입니다.

http://184.106.239.214/pacific_grove_zoning/ 

소스 코드로 보입니다. 자동 완성 필드에 일부 주소 ("1234 ..", "1000 ..."등)를 입력 한 다음 주소를 선택하기 만하면지도가 변경된 것을 볼 수 있습니다.

다음은 구글 맵 기능

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