FusionTablesLayer скрывает основную карту на странице WordPress

Question

Я хотел бы отобразить карту Google с двумя слоями таблиц Fusion. Приведенный ниже код отлично работает, если я просто скопирую его в текстовый редактор и сохраню файл как map.htmlи откройте его в моем браузере. Но когда я помещаю это в пост на моем WordPress-тематическом сайте, основная карта скрывается слоями Fusion Tables. Эти слои не являются полностью непрозрачными: я могу видеть их оба одновременно. Я просто не вижу основной карты.

Всякий раз, когда я масштабирую или панорамирую карту, соответствующая карта появляется на короткое время до того, как слои Fusion Tables поверх нее. Я подозреваю, что виновата установка стиля. Знаете ли вы, как заставить карту отображаться правильно?

Я использую WordPress версии 3.0.4 с темой Gazette от woothemes; сайт 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>

Спасибо!

Answer 1

Wordpress оборачивает содержимое вашего поста в <div class="entry"> блок, который ваша тема использует для обеспечения правильного оформления. Поскольку javascript, который подготавливает карту Google для отображения, возвращает изображение, соответствующая часть таблицы стилей Бюллетеня:

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

В частности, background-color настройка заставляет наложенные слои Fusion Tables рисоваться с непрозрачным фоном, который затем скрывает основную карту. Вам нужно определить новый класс в вашей таблице стилей (назовем его "карта"), который рисует изображения с прозрачным фоном:

.map img {
    background-color: transparent;
    }

А затем оберните ваш JavaScript в <div class="map"> блок, вот так:

<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>