-1

iframe を使用して Google マップを各検索エンジンの結果に埋め込む検索エンジン ベースのサイトに取り組んでいます。問題は、ほとんどのユーザーが地図を見ることを気にしないことです。1 つ以上の iframe が表示される可能性が非常に低い場合に、すべての検索結果ページに 20 個の iframe を読み込むことは、サイトの読み込み時間が遅くなるため良くありません。「address-link」でトリガーをクリックした場合にのみ、「address-popup」クラスのコンテナー内にある 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>';
4

2 に答える 2

1

なぜiframeを使用するのですか？Googleマップを一般的な「ポップアップ」DIVに直接ロードし、リンクをクリックするたびにそのマップを選択したアドレスの中央に配置することができます。これは、HTMLページ全体をロードするよりもはるかに優れたパフォーマンスを発揮する可能性があります。

これは、私の友人がjavascript/maps機能を実装するのを手伝った概念実証からの実用的な例です。

http://184.106.239.214/pacific_grove_zoning/

ソースコードを見てください。オートコンプリートフィールドに住所（ "1234 .."、 "1000 ..."など）を入力してから住所を選択するだけで、地図の変更を確認できます。

これがグーグルマップ機能に関連するこのサイトからのjavascriptの主要部分です

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);
      }
    });
}
于 2012-11-07T01:41:00.233 に答える
1

すべての iframe のコードを JavaScript に含めることができます。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>'); 
});

より具体的にする 1 つの方法は、次のように、データ属性を使用してターゲット コンテナーの ID を定義することです。

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

したがって、すべてのトリガーに対して、ターゲット ID をデータ属性として定義でき、同じスクリプトを使用できます。

于 2012-11-07T01:31:10.867 に答える