Раскрывающееся меню Google Fusion Map Javascript не работает

Я реализовал меню javascript, позволяющее пользователям переключаться на разные виды карты с помощью наложений Google Fusion Table. К сожалению, мои выпадающие меню не работают по отдельности или вместе. Например, кто-то хочет видеть порты только в регионе «Ближний Восток» или кто-то хочет видеть порты в регионе «Индийский субконтинент» И тип порта «ICD».

Вторая проблема, по-видимому, заключается в том, что маркеры не отображаются так, как указано в Fusion Table. Они имеют разные цвета для «Доставки» и «ICD» для «Типа» порта.

Это моя работа на данный момент:

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fusion Map</title>

    <style>
        body {margin:0 auto; width:960px;}
        #map_div {height:550px; width:100%; margin-top:50px;}
    </style>

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script>
        var tableid = 1102368;
        var layer = new google.maps.FusionTablesLayer(1102368);

        function initialize() {
        var ports = new google.maps.LatLng(35.173808, 37.236325);
        var myOptions = {
            center: ports,
            zoom: 3,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_div'),
            myOptions);
                layer.setMap(map);
        }

        function refreshFusion() {
            var qry = "SELECT PortName, 'Region' FROM " + tableid;
            var region = document.getElementById('ddRegion').value;
            var type = document.getElementById('ddType').value;
            var filters = [];
            if(type != '') {
                filters.push("'Type' CONTAINS '" + type + "'");
            }
            if(type != '') {
                filters.push("'Region' CONTAINS '" + region + "'");
            }
            if(filters.lenght > 0) {
                qry += " WHERE " + filters.join(" AND ");
            }
            layer.setQuery(qry);
        }
    </script>

</head>

<body onload="initialize();">
    <div id="map_div"></div>

    <div>
        <h3>Region</h3> 
        <select id="ddRegion" style="width: 150px;" onchange="refreshFusion();">
            <option value="">All</option>
            <option value="Middle East">Middle East</option>
            <option value="Red Sea">Red Sea</option>
            <option value="East Mediterranean">East Mediterranean</option>
            <option value="West Mediterranean">West Mediterranean</option>
            <option value="Adriatic">Adriatic</option>
            <option value="Black Sea">Black Sea</option>
            <option value="North Africa">North Africa</option>
            <option value="Indian Sub-Continent">Indian Sub-Continent</option>
        </select>
        <h3>Type</h3> 
        <select id="ddType" style="width: 150px;" onchange="refreshFusion();">
            <option value="">All</option>
            <option value="Shipping">Shipping</option>
            <option value="ICD">ICD</option>
        </select>
    </div>
</body>
</html>

Вот сводная таблица: Ссылка

Вот активный код: Ссылка

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


google-maps javascript google-fusion-tables
person Sags    schedule 19.01.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы также захотите изменить предложение SELECT в своем запросе на следующее:

"SELECT PortName FROM " + tableid;

поскольку только столбец местоположения должен быть в предложении SELECT запроса Fusion Tables Layer.

В общем, вы также можете рассмотреть возможность использования нового синтаксиса Fusion Tables Layer. Пример можно увидеть здесь:

http://code.google.com/apis/fusiontables/docs/samples/change_query.html

person Kathryn Hurley    schedule 20.01.2012
comment
Спасибо за ссылку! Это очень помогло. - person Sags; 22.01.2012

arrow_upward
1
arrow_downward

Строка 37, вы говорите тип != '', я думаю, вы имеете в виду проверить регион != 'Все' здесь. Строка 40, у вас есть filter.length, у вас должно быть filter.length

Если вы используете Firebug или инструменты разработчика Chrome, вам будет очень легко пройтись по коду и посмотреть, какие значения и когда установлены.

person Mano Marks    schedule 19.01.2012
comment
Спасибо, что указали на опечатку. Я знакомился с Firebug, но не смог использовать весь его потенциал. Этот тоже помог решить проблему. Большое спасибо! - person Sags; 22.01.2012