0

何が間違っているのかわかりませんが、マーカーやサイドバーを表示できません。どの部分が欠けているのか、それとも構文が間違っているのかわかりません。お役に立てれば幸いです。

<!-- language: lang-js --> 

google.load('visualization', '1', {'packages':['table']});
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
var ak = new google.maps.LatLng(64.958056,-147.618333);

map = new google.maps.Map(document.getElementById('map_canvas'), {
center: ak,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var sql = encodeURIComponent("SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME");
var query = new  google.visualization.Query('https://www.googleapis.com/fusiontables/v1/query?sql=' + sql);

query.send(getData);
}

function getData(response) {
var dt = response.getDataTable();  

var side_html = '<table style="border-collapse: collapse" border="1" \
                   cellpadding="5"> \
                   <thead> \
                     <tr style="background-color:#e0e0e0"> \
                       <th>City</th> \
                     </tr> \
                   </thead> \
                   <tbody>';

for (var i = 0; i < dt.getNumberOfRows(); i++) {
  var lat = dt.getValue(i,1);
  var lng = dt.getValue(i,2);
  var name = dt.getValue(i,0);
  var description = dt.getValue(i,3);

var pt = new google.maps.LatLng(lat, lng);

var html = "<strong>" + name + "</strong><br />";

  side_html += '<tr> \
                  <td><a href="javascript:myclick(' + i + ')">' + name + '</a></td> \
                </tr>';


  createMarker(pt, html);

}

side_html += '</tbody> \
            </table>';
document.getElementById("side_bar").innerHTML = side_html;
}


function createMarker(point,info) {
var iconURL = 'uaf-icon.png';               var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0);    var iconAnchor = new google.maps.Point(15,60);

var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

var shadowURL = 'uaf-shadow.png';           var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0); var shadowAnchor = new google.maps.Point(15, 60);

var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);

var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
  coord: iconShape,
  type: 'poly'
};

var myMarkerOpts = {
  position: point,
  map: map,
  icon: myIcon,
  shadow: myShadow,
  shape: myMarkerShape
};

var marker = new google.maps.Marker(myMarkerOpts);

markers.push(marker);

google.maps.event.addListener(marker, 'click', function() {
  infoWindow.close();
  infoWindow.setContent(info);
  infoWindow.open(map,marker); 
});
}

function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
4

1 に答える 1

1

あなたのクエリは無効です: "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY NAME"

「SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY name」(「name」列の名前は小文字で、ORDER BY は列名を取ります)。

Fusion Table API v1.0 を使用するか、視覚化 API (別名 GViz) を使用するかを決定する必要があります。コードは GViz を使用するように記述されているように見えますが、クエリを v1 API に送信しています。

これは私のために働く：

var queryStr = "SELECT name, lat, lng, description FROM 1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds ORDER BY name";
var queryText = encodeURIComponent(queryStr);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

また、応答処理にエラー チェックを追加すると、何が起こっているかを確認できます (タイムアウトしていました)。

function getData(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
var dt = response.getDataTable();

実施例

于 2013-03-27T21:20:26.740 に答える