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

Я хочу отобразить карту Google с двумя слоями Fusion Tables. Код ниже отлично работает, если я просто скопирую его в текстовый редактор, сохраню файл как 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>

Спасибо!


google-maps wordpress google-fusion-tables
person kateyg    schedule 20.01.2012    source источник
comment
Мы выяснили это. Возник конфликт стиля с темой. Изображения начального класса имеют белый фон. Добавлен новый подкласс .map img, указывающий прозрачный фон.   -  person kateyg    schedule 21.01.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

.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>
person Wesley    schedule 21.01.2012