Home/ Questions/Q 7085039
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:22:32+00:00

I have implemented a javascript menu allowing users to change to different map views

  • 0

I have implemented a javascript menu allowing users to change to different map views using the Google Fusion Table overlays. Unfortunately, my dropdown menus don’t work separately or together. For example, someone wants to see ports in “Middle East” Region only or someone wants to see ports in “Indian Sub-Continent” Region AND “ICD” Type of port.

Second problem seems to be the markers not showing up as identified in Fusion Table. They have different colors for “Shipping” and “ICD” for “Type” of port.

This is my work so far:

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

Here is the Fusion Table: Link

Here is the Live Code: Link

Any and all help is greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You will also want to change the SELECT clause in your query to the following:

    "SELECT PortName FROM " + tableid;

    since only the location column should be in the SELECT clause of a Fusion Tables Layer query.

    In general, you might want to consider using the new Fusion Tables Layer syntax as well. An example can be seen here:

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

    • 0