Настроить InfoWindow для таблицы Fusion с раскрывающимися слоями меню

Я создал многоуровневую карту FusionTables, где я заменяю таблицуId и, следовательно, видимые маркеры карт на основе выделения из выпадающего меню. У меня возникли проблемы с настройкой свойств infoWindow для каждого слоя после того, как вы сделали свой выбор. Просмотрев несколько справочных страниц и руководств, я попытался стилизовать инфо-окно, и я также безуспешно пытался реализовать опцию infoBox. (Я стилизовал infoWindow в рабочем пространстве FusionTables, но эти стили не импортируются.) Я добавил код до сих пор; есть ли у кого-нибудь предложения, какие я могу попробовать.) настроить содержимое окна (выбрать, какие столбцы FusionTable и последующие данные будут отображаться в окне, и b) стилизовать само окно?Настроить InfoWindow для таблицы Fusion с раскрывающимися слоями меню

Любая помощь приветствуется - Спасибо.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

<meta charset="UTF-8"> 

<title>Layered Map</title> 

<link href="/apis/fusiontables/docs/samples/style/default.css" 

rel="stylesheet" type="text/css"> 

<style> 

#map-canvas { width:1250px; height:600px; } 

.layer-wizard-search-label { font-family: sans-serif }; 

</style> 



<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"> 

</script> 

<script src="/path/to/infobox.js" type="text/javascript"></script> 

<script type="text/javascript"> 

var map = null; 

function initialize() { 

    var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; 

    var locationColumn = 'Lat/Long'; 



    map = new google.maps.Map(document.getElementById('map-canvas'), { 

     center: new google.maps.LatLng(40, 265), 

     zoom: 4, 


     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
     }, 

    }); 



    var layer = new google.maps.FusionTablesLayer({ 

     query: { 

     select: locationColumn, 

     from: tableId 

    } 

}); 



    google.maps.event.addDomListener(document.getElementById('option'), 

     'change', function() { 

     updateMap(layer, tableId, locationColumn); 

}); 

} 



function updateMap(layer, tableId, locationColumn) { 

var option = document.getElementById('option').value; 

if (option) { 

switch(option){ 

    case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w'; 

      break; 

    case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0'; 

      break; 

    default: 

    case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId 

      break; 

} 

layer.setOptions({ 

     query: { 

     select: locationColumn, 

     from: tableId, 

     }, 

     map: map, 
     styleId: 2, 
     templateId: 2, 

    }); 

} else { 

layer.setMap(null); 

} 

} 





google.maps.event.addDomListener(window, 'load', initialize); 







</script> 



</head> 

<body> 



<div id="map-canvas"></div> 

<label>Layer:</label> 

<select id="option"> 

<option selected>--Select--</option> 

<option value="1">1</option> 

<option value="2">2</option> 

<option value="3">3</option> 

</select> 

</body> 

</html>

источник

2013-08-13 user2665799

Чтобы получить FusionTable использовать отформатированные infowindows, вам нужно пройти [соответствующее templateId и styleId в конструктор FusionTable] (http://stackoverflow.com/questions/15206272/google-fusion-map-info-window-not-formatted) – geocodezip

[Пример 3 FusionTableLayers на карте, совместно использующей один инфо-окно] (http: //www.geocodezip.com/www_satpacktravel_com_api_v5b.html) – geocodezip

Awesome, я отредактировал свой код и добавил ", \t \t \t styleId: 2, \t \t \t templateId: 2,» И теперь это добавление стилей для первых двух слоев в соответствии с просьбой, но не третий слой? – user2665799

Добавить styleId и templateId в функцию для изменения таблицы и исправить соответствующий один:

switch(option){ 
    case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w'; 
      var templateId =2; 
      var styleId =2; 
      break; 
    case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0'; 
      var templateId =2; 
      var styleId =3; 
      break; 
    default: 
    case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId 
      var templateId =2; 
      var styleId =2; 
      break; 
} 

layer.setOptions({ 
     query: { 
     select: locationColumn, 
     from: tableId, 
     }, 
     map: map, 
     styleId: styleId, 
     templateId: templateId, 
});

источник

2013-08-13 20:57:01 geocodezip

Настроить InfoWindow для таблицы Fusion с раскрывающимися слоями меню

ответ

Смежные вопросы