Question

我正在尝试创建一个Google地图，根据此处显示的解决方案，使用自定义地图标记从Fusion Table加载地图数据： http://code.google.com/p/fusion-tables/issues/detail?id=69#c107

此代码的我的版本正在显示地图，而且似乎来自Fusion Table的json数据请求成功，但地图上没有显示任何标记。

有人可以建议我做错了吗？

页面在这里： http://clorentzen.com/queensbrewery/fusiontable.html

谢谢！

更多信息：桌子： https://www.google.com/fusiontables/DataSource?docid=1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc

代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Table version of QB on draft info</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }

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

    <script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>

    <script type="text/javascript">

    var map;
    var infoWindow = new google.maps.InfoWindow();
    var DEFAULT_ICON_URL = 'http://clorentzen.com/queensbrewery/qb_maps.png';

    // EDIT: change this key to your own from the Google APIs Console
    // https://code.google.com/apis/console/
    var apiKey = 'AIzaSyAlluI5j2piL1x7OK8dOiZRreO3L6VCZSQ';

    // EDIT: Specify the table with location data and icon URLs
    var tableID = '1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc';

    // Create variables for the columns you need to retrieve from the table
    // EDIT this list as needed, then find and edit two places below.
    var latitudeColumn = 'LATITUDE';
    var longitudeColumn = 'LONGITUDE';
    var iconUrlColumn = 'ICON';
    var venueColumn = 'BAR';
    var addressColumn = 'ADDRESS';
    var neighborhoodColumn = 'NEIGHBORHOOD';
    var regionColumn = 'REGION';


    function createMarker (coordinate, url, content) {
        var marker = new google.maps.Marker({
            map: map,
            position: coordinate,
            icon: new google.maps.MarkerImage(url)
        });
        google.maps.event.addListener(marker, 'click', function(event) {
            infoWindow.setPosition(coordinate);
            infoWindow.setContent(content);
            infoWindow.open(map);
        });
    };

    function fetchData() {

        // Construct a query to get data from the Fusion Table
        // EDIT this list to include the variables for columns named above
        var query = 'SELECT '
        + latitudeColumn + ','
        + longitudeColumn + ','
        + iconUrlColumn + ','
        + venueColumn + ','
        + addressColumn + ','
        + neighborhoodColumn + ','
        + regionColumn + ' FROM '
        + tableID;
        var encodedQuery = encodeURIComponent(query);

        // Construct the URL
        var url = ['https://www.googleapis.com/fusiontables/v1/query'];
        url.push('?sql=' + encodedQuery);
        url.push('&key=' + apiKey);
        url.push('&callback=?');

        // Send the JSONP request using jQuery
        $.ajax({
            url: url.join(''),
            dataType: 'jsonp',
            success: onDataFetched
        });
    }

    function onDataFetched(data) {
        var rows = data['rows'];
        var iconUrl;
        var content;
        var coordinate;


        // Copy each row of data from the response into variables.
        // Each column is present in the order listed in the query.
        // Starting from 0.
        // EDIT this if you've changed the columns, above.
        for (var i in rows) {
            coordinate = new google.maps.LatLng(rows[i][0],rows[i][1]);
            iconUrl = rows[i][2];
            content = "<strong>" + rows[i][3] + "</strong><br>" + rows[i][4] + "<br>" + rows[i][5] + ", " + rows[i][6] + "<br>";

            if (iconUrl) {   // ensure not empty
                createMarker(coordinate, iconUrl, content);
            } else {
                createMarker(coordinate, DEFAULT_ICON_URL, content);
            }
        }
    }

    function initialize() {

        fetchData();  // begin retrieving data from table, and put it on the map

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(40.7,-73.8),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    }

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

    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

Answer 1

该错误（消息：＆＃34;未配置访问＆＃34;）是由于没有正确的引荐键（至少当我添加了正确的密钥时，它适用于我）

真正的问题是你的纬度和经度是颠倒的，所以标记出现在南极洲。

working example (with my key)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Table version of QB on draft info</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }

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

    <script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>

    <script type="text/javascript">

    var map;
    var bounds = new google.maps.LatLngBounds();
    var infoWindow = new google.maps.InfoWindow();
    var DEFAULT_ICON_URL = 'http://clorentzen.com/queensbrewery/qb_maps.png';

    // EDIT: change this key to your own from the Google APIs Console
    // https://code.google.com/apis/console/
    var apiKey = 'AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I';

    // EDIT: Specify the table with location data and icon URLs
    var tableID = '1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc';

    // Create variables for the columns you need to retrieve from the table
    // EDIT this list as needed, then find and edit two places below.
    var latitudeColumn = 'LATITUDE';
    var longitudeColumn = 'LONGITUDE';
    var iconUrlColumn = 'ICON';
    var venueColumn = 'BAR';
    var addressColumn = 'ADDRESS';
    var neighborhoodColumn = 'NEIGHBORHOOD';
    var regionColumn = 'REGION';


    function createMarker (coordinate, url, content) {
        var marker = new google.maps.Marker({
            map: map,
            position: coordinate,
            icon: new google.maps.MarkerImage(url)
        });
        google.maps.event.addListener(marker, 'click', function(event) {
            infoWindow.setPosition(coordinate);
            infoWindow.setContent(content);
            infoWindow.open(map);
        });
    bounds.extend(coordinate);
    };

    function fetchData() {

        // Construct a query to get data from the Fusion Table
        // EDIT this list to include the variables for columns named above
        var query = 'SELECT '
        + latitudeColumn + ','
        + longitudeColumn + ','
        + iconUrlColumn + ','
        + venueColumn + ','
        + addressColumn + ','
        + neighborhoodColumn + ','
        + regionColumn + ' FROM '
        + tableID;
        var encodedQuery = encodeURIComponent(query);

        // Construct the URL
        var url = ['https://www.googleapis.com/fusiontables/v1/query'];
        url.push('?sql=' + encodedQuery);
        url.push('&key=' + apiKey);
        url.push('&callback=?');

        // Send the JSONP request using jQuery
        $.ajax({
            url: url.join(''),
            dataType: 'jsonp',
            success: onDataFetched
        });
    }

    function onDataFetched(data) {
        var rows = data['rows'];
        var iconUrl;
        var content;
        var coordinate;


        // Copy each row of data from the response into variables.
        // Each column is present in the order listed in the query.
        // Starting from 0.
        // EDIT this if you've changed the columns, above.
        for (var i in rows) {
            coordinate = new google.maps.LatLng(rows[i][1],rows[i][0]);
            iconUrl = rows[i][2];
            content = "<strong>" + rows[i][3] + "</strong><br>" + rows[i][4] + "<br>" + rows[i][5] + ", " + rows[i][6] + "<br>";

            if (iconUrl) {   // ensure not empty
                createMarker(coordinate, iconUrl, content);
            } else {
                createMarker(coordinate, DEFAULT_ICON_URL, content);
            }
        }
        map.fitBounds(bounds);
    }

    function initialize() {

        fetchData();  // begin retrieving data from table, and put it on the map

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(40.7,-73.8),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    }

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

    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

Answer 2

您似乎没有在onDataFetched函数中获得任何有用的数据。 data的日志显示error对象：

code: 403
...
message: "Access Not Configured"

可能的原因可能是不可出口的表格。请参阅403 error when making an SQL query for a Fusion Table

中的答案

带有Fusion Table数据的Google Map不显示地图标记

2 个答案: