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

Question

Я бы хотел отобразить карту 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> 

Спасибо!

Answer 1

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

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

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

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