1

2つのFusionTablesレイヤーでオーバーレイされたGoogleマップを表示したいと思います。map.html以下のコードは、テキストエディターにコピーし、ファイルをとして保存して、ブラウザーで開くだけで完全に機能します。しかし、WordPressをテーマにしたサイトの投稿に配置すると、基になるマップはFusionTablesレイヤーによって非表示になります。これらのレイヤーは完全に不透明ではありません。両方を同時に見ることができます。下にある地図が見えません。

マップをズームまたはパンすると、Fusion Tablesレイヤーがその上に描画される前に、下にあるマップが短時間表示されます。スタイル設定に問題があるのではないかと思います。地図を正しく表示する方法を知っていますか？

woothemesによるGazetteテーマでWordPressバージョン3.0.4を使用しています。サイトはhttp://www.wisconsinwatch.orgです。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
        var fracmap = new google.maps.Map(document.getElementById('gmap'), {
            center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
        });
        var layer0 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
</div>

ありがとう！

4

1 に答える 1

1

Wordpressは、投稿のコンテンツを<div class="entry">ブロックにラップします。これは、テーマが適切なスタイルを提供するために使用します。Googleマップを表示用に準備するJavaScriptは画像を返すため、Gazetteスタイルシートの関連部分は次のとおりです。

.entry img {
    padding: 4px;
    border: 1px solid #dddddd;
    background-color: #FFFFFF;
    }

具体的には、このbackground-color設定により、オーバーレイされたFusion Tablesレイヤーが不透明な背景で描画され、その結果、下にあるマップが非表示になります。透明な背景で画像を描画する新しいクラスをスタイルシート（「マップ」と呼びましょう）で定義する必要があります。

.map img {
    background-color: transparent;
    }

<div class="map">次に、JavaScriptを次のようにブロックでラップします。

<div class="map">               
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
    var fracmap = new google.maps.Map(document.getElementById('gmap'), 
        center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
            });
            var layer0 = new google.maps.FusionTablesLayer({
                query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
    </div>
</div>
于 2012-01-21T18:37:29.013 に答える