2

以下のコードについて質問があります: Google マップが表示されないのはなぜですか?

スクリプトは、選択したポイントに関して円を描くようにマップに指示するセクションを挿入するまで、以前は機能していました。サンプルコードhereのコードを使用しました。適切に変更されているかどうかはわかりません。ここでやりたいことは、選択したポイントを使用して、その周りにサークル バッファーを作成することです。距離はエンド ユーザーが指定でき、この距離内のポリゴンが表示されます。

データは非公開ですので、共有することはできません。TableID1 はポイント レイヤーで、TableID2 はポリゴン レイヤーです。

どんな助けでも大歓迎です。

コードは次のとおりです。

<!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>Wells</title>

<style>
        #map-canvas { width:800px; height:600px; }
      </style>

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

<script type="text/javascript">

    function initialize() {
        var tableId = '';
        var tableId2 = '';       
        var locationColumn = 'geometry';
        var locationColumn2 = 'geometry';

        var map = new google.maps.Map(document.getElementById('map-canvas'), 
        {
          center: new google.maps.LatLng(43.85012691109855, -79.75539434814452),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({

        query: {
            select: locationColumn,
            from: tableId,
            where: 'ST_INTERSECTS (description, CIRCLE(wellid), 5000))'
             },

        map: map
        });

        var layer2 = new google.maps.FusionTablesLayer({

        query: {
            select: locationColumn2,
            from: tableId2
          },
          map: map
        });

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

'change', 
function() {
        updateMap(layer, tableId, locationColumn);
        });

      }

// Update the query sent to the Fusion Table Layer based on  
// the user selection in the select menu

function updateMap(layer, tableId, locationColumn) {
        var wellid = document.getElementById('wellid').value;
        if (wellid) {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId,
              where: "description CONTAINS '" + wellid + "'"
            }
          });
        } 

else {
        layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId
            }
          });
        }
      }



// Create a map circle object to visually show the radius.

        var circle = new google.maps.Circle({
          center: new google.maps.LatLng(wellid),
          radius: 5000,
          map: map,
          fillOpacity: 0.2,
          strokeOpacity: 0.5,
          strokeWeight: 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'),
            'change', function() {
              var meters = parseInt(this.value, 10);
              layer.setOptions({
                query: {
                  select: 'description',
                  from: tableid,
                  where: 'ST_INTERSECTS(Address, ' +
                      'CIRCLE(wellid), ' + meters + '))'
                }
              });
              circle.setRadius(meters);
            });

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

    </script>


</head>


<body>

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

<label>Well ID:</label>


<select id="wellid">


<option value="">--Select--</option>


<option value="Well ID: 9">9</option>


<option value="Well ID: 129">129</option>


<option value="Well ID: 130">130</option>


<option value="Well ID: 131">131</option>


<option value="Well ID: 384">384</option>


<option value="Well ID: 469">469</option>


<option value="Well ID: 470">470</option>


<option value="Well ID: 494">494</option>


<option value="Well ID: 495">495</option>


<option value="Well ID: 697">697</option>


<option value="Well ID: 698">698</option>


<option value="Well ID: 735">735</option>


<option value="Well ID: 737">737</option>


</select>


</body>


</html>
4

1 に答える 1