2012-03-14 13 views
-1

Googleは、選択したドロップダウンに基づいてGoogleマップにマーカーを配置しようとしています。私はデータベースからの結果を持っているXML文書に関する私の私の文書を持っています。私は選択したドロップダウンに基づいてそのXML文書から結果を取得したいと思います。それらのマーカーを地図上に配置したいと思います。これについての最善の方法に関するアイデアはありますか?私は可能な限りPHPを使用したいと思います。HTMLに基づいてスクリーンにGoogleマップマーカーを追加する選択

答えて

1

JavaScriptを使用する必要があるGoogleマップを使用して地図上にマーカーをペイントするために、PHPの一部のみを使用することができます。ここでは、Googleマップをロードしてその上にマーカーを表示する方法の非常に基本的な例を示します。明らかに、データソースを繰り返し処理して、それを使用して選択リストにオプション値を設定する必要があります。潜在的なアイテムをたくさん扱っている場合は、オプションの値を別のhttpリクエスト(たとえばajaxを使用)で取得するのが理にかなっています。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Simple Map</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=false" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var map; 

     var male = [[39.167107,-86.534363],[39.130554,-85.128891]]; 
     var female = [[39.167107,-84.534363],[38.130554,-83.128891]]; 

     function initialize() { 
      if (GBrowserIsCompatible()) { 
      map = new GMap2(document.getElementById("map_canvas")); 
      map.setCenter(new GLatLng(39.167107,-86.534363), 7); 
      map.setUIToDefault(); 

      } 
     } 

     function addMarker(){ 
      var select = document.getElementById("choose_option"); 
      var currentValue = select.options[select.selectedIndex].value;  

      if (currentValue == "Male") 
      { 
       for (i=0;i<male.length;i++){ 
        var markerPoint = new GLatLng(male[i][0], male[i][1]); 
        var marker = new GMarker(markerPoint, {draggable: true, bouncy: true}); 
        map.addOverlay(marker); 
       } 
      } 
      else if (currentValue == "Female") 
      {  
       for (i=0;i<female.length;i++){ 
        var markerPoint = new GLatLng(female[i][0], female[i][1]); 
        var marker = new GMarker(markerPoint, {draggable: true, bouncy: true}); 
        map.addOverlay(marker); 
       } 
      } 

     } 
    </script> 
    </head> 

    <body onload="initialize()" onunload="GUnload()"> 
    <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    <select id="choose_option" onchange="addMarker()"> 
     <option id="1" value="">Choose</option> 
     <option id="2" value="Male">Male</option> 
     <option id="3" value="Female">Female</option> 
    </select> 
    </body> 
</html> 
+0

これは大きな助けであり、ありがとうございます。しかし、私のオプションは男性と女性だけに固定されています。どちらか一方を選択すると、xmlドキュメントの男性または女性のエントリのみをマップに配置します。それ以上の洞察? – Dude

+0

XML文書の一部を参照として貼り付けることはできますか? – javram

+0

' '------>だから、選択オプションが選択されている場合は、男性の項目のみを返したい。 – Dude

関連する問題