2011-07-13 22 views
0

現在、私は現在、Google融合テーブルオーバーレイを使用して異なるマップビューに変更できるようにするjavascriptメニューを持つ地図を作成しています。私の最初のドロップダウンメニューは魅力的に機能します。ただし、2番目のドロップダウンメニューはもう一方のメニューでは機能しません。私は2人が一緒に働くことを望みます。たとえば、誰かが「動物」と「機会」を選択すると、セルデータ「動物」と「機会」がある場所が表示されます。フュージョンテーブルGoogleマップの2番目のJavaScriptのドロップダウンメニューが機能しない

これは私のGoogleマップのHTMLページです。ここで

 <html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<!DOCTYPE html> 
<title>Met Sacramento Internship Map</title> 

<!-- Style --> 
<style> 
    body { font-family: Arial, sans-serif; } 
    #map_canvas { height: 500px; width:600px; } 
</style> 

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

    function initialize() { 
    var latlng = new google.maps.LatLng(38.59970036588819, -121.541748046875); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
      layer.setMap(map); 
    } 
    //Change the query based on the user's selection 
function interestMap(interest) { 
layer.setQuery("SELECT Address, 'Interest Area' FROM " + tableid + " WHERE 'Interest Area' CONTAINS '" + interest + "'"); 
} 
function statusMap(status) { 
layer.setQuery("SELECT Address, 'Status' FROM " + tableid + " WHERE 'Status' CONTAINS '" + status + "'"); 
} 
</script> 

</script> 

</head> 
<body onload="initialize();"> 
    Internship Status <select onchange="interestMap(this.value);"> 
    <option value="">Interest Areas</option> 
<option value="Aerospace">Aerospace</option> 
<option value="Animals">Animals</option> 
<option value="Architecture">Architecture</option> 
<option value="Art/Music/Theatre">Art/Music/Theatre</option> 
<option value="Athletics and Martial Arts">Athletics</option> 
<option value="Automotive and Transportation">Automotive</option> 
<option value="Bicycles">Bicycles</option> 
<option value="Business">Business</option> 
<option value="Community Development">Community Development</option> 
<option value="Computers">Computers</option> 
<option value="Cosmetology">Cosmetology</option> 
<option value="Culinary">Culinary</option> 
<option value="Education">Education</option> 
<option value="Government and Politics">Politics</option> 
<option value="Health Science">Health Science</option> 
<option value="Hospitality/Tourism/Event Planning">Event Planning</option> 
<option value="Law and Public Safety">Law and Public Safety</option> 
<option value="Marketing">Marketing</option> 
<option value="Media and Information Technology">Media</option> 
<option value="Photography">Photography</option> 
<option value="Science and Technology">Science and Technology 
</option> 
<option value="Social Services">Social Services</option> 
    </select> 
    Status <select onchange="statusMap(this.value);"> 
    <option value="">Status</option> 
<option value="BEING PURSUED">Being Pursued</option> 
<option value="HAS INTERN">Has Intern</option> 
<option value="NOT TAKING">Not Taking</option> 
<option value="OPPORTUNITY">Opportunity</option> 
<option value="OVER 18">Over 18</option> 
<option value="POTENTIAL?">Potential</option> 
<option value="SEE NOTES">See Notes</option> 


    </select> 
    <div id="map_canvas"></div> 

</body> 
</html> 

がされています。ここ Fusion Table

は次のとおりです。 Live Code

すべてのヘルプは大歓迎です!ありがとう。

+0

あなたはお互いに別のクエリを実行しています。選択した値を使用して1つのデータクエリをトリガするボタンを追加することを検討してください。 – Jonathan

+0

これについてもう少し説明してもらえますか?私は若干JavaScriptを初めて使っています。 function interestMapとfunction statusMapを1つのトリガーボタンに変えることを意味していると思います。私はこれについてどうやって行くのですか? – Noah

答えて

0

解決策はChromeでテストされています;) - 2つの選択された要素の新しいボタン、refreshFusionメソッド、id属性に注目してください。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Met Sacramento Internship Map</title> 

<!-- Style --> 
<style> 
    body { font-family: Arial, sans-serif; } 
    #map_canvas { height: 500px; width:600px; } 
</style> 

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

    function initialize() { 
    var latlng = new google.maps.LatLng(38.59970036588819, -121.541748046875); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
      layer.setMap(map); 
    } 

    function refreshFusion() { 
     var qry = "SELECT Address, 'Status' FROM " + tableid; 
     var interest = document.getElementById('ddlInterest').value; 
     var status = document.getElementById('ddlStatus').value; 
     var filters = []; 
     if(interest != '') { 
      filters.push("'Interest Area' CONTAINS '" + interest + "'"); 
     } 
     if(status != '') { 
      filters.push("'Status' CONTAINS '" + status + "'"); 
     } 
     if(filters.length > 0) { 
      qry += " WHERE " + filters.join(" AND "); 
     } 
     layer.setQuery(qry); 
    } 
</script> 

</script> 

</head> 
<body onload="initialize();"> 
    <p>Internship Status <select id="ddlInterest"> 
    <option value="">Interest Areas</option> 
<option value="Aerospace">Aerospace</option> 
<option value="Animals">Animals</option> 
<option value="Architecture">Architecture</option> 
<option value="Art/Music/Theatre">Art/Music/Theatre</option> 
<option value="Athletics and Martial Arts">Athletics</option> 
<option value="Automotive and Transportation">Automotive</option> 
<option value="Bicycles">Bicycles</option> 
<option value="Business">Business</option> 
<option value="Community Development">Community Development</option> 
<option value="Computers">Computers</option> 
<option value="Cosmetology">Cosmetology</option> 
<option value="Culinary">Culinary</option> 
<option value="Education">Education</option> 
<option value="Government and Politics">Politics</option> 
<option value="Health Science">Health Science</option> 
<option value="Hospitality/Tourism/Event Planning">Event Planning</option> 
<option value="Law and Public Safety">Law and Public Safety</option> 
<option value="Marketing">Marketing</option> 
<option value="Media and Information Technology">Media</option> 
<option value="Photography">Photography</option> 
<option value="Science and Technology">Science and Technology 
</option> 
<option value="Social Services">Social Services</option> 
    </select> 
    Status <select id="ddlStatus"> 
    <option value="">Status</option> 
<option value="BEING PURSUED">Being Pursued</option> 
<option value="HAS INTERN">Has Intern</option> 
<option value="NOT TAKING">Not Taking</option> 
<option value="OPPORTUNITY">Opportunity</option> 
<option value="OVER 18">Over 18</option> 
<option value="POTENTIAL?">Potential</option> 
<option value="SEE NOTES">See Notes</option> 


    </select> <input type="button" value="Run Query" onclick="refreshFusion();" /></p> 
    <div id="map_canvas"></div> 

</body> 
</html> 
+0

うわー!本当にありがとう!これは魅力的に機能しました。 1つの質問は、結果を照会するボタンなしでこれを行う方法はありませんか? – Noah

+0

ボタンを削除し、 'onchange =" refreshFusion(); "をselect要素に追加することができます。 * FFでテスト済み* – Jonathan

関連する問題