Question

我创建了一个包含融合表的地图，并希望仅通过我的网站

显示它

我使用Oauth为Web应用程序创建了一个客户端ID，并在地图上复制了ID，但我无法使其正常工作

如果我尝试从我的网站打开地图，它会打开一个没有标记的空白地图我做错了什么？

你可以帮我找到错误吗？

谢谢

我为我的英语道歉

这是页面的代码


    
    
    
    
    
    
    Google Maps JavaScript API v3 Example: Fusion Tables Layer
    
    
    
    function initialize() 
    {
    geocoder = new google.maps.Geocoder();
    var italia = new google.maps.LatLng(42.147114,13.25964);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: italia,
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var campminuscolo = idcamping.value 
     var camp          = "'"  + campminuscolo   + "'"
     var camp1         = "'Nome' contains ignoring case " +  camp 

     var layer = new google.maps.FusionTablesLayer({
         query: {
                select: 'indirizzo', 
                from:   '1mMSBct8LQjKiZBj-BqLYhszMgjKXUJnHxlQQaSgS',
                where:  camp1                                           
                },

                options: {
                     styleId: 2,
                     templateId: 2
                          },



     styles: [{           
        markerOptions: {
        iconName: "grn_circle"
                       },                   
             }]


     });

      layer.setMap(map);




    }  

    function testenter(e) {
    if (e.keyCode == 13) {            // tasto enter  
    initialize();
    return false;        
                }
    }

    var geocoder;
    var map;
    var markersArray = [];
    var marker;

    function codeAddress() {
    var address = document.getElementById("address").value;            
    geocoder.geocode({ 'address': address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        clearOverlays();
        document.getElementById("address").value = results[0]['formatted_address'];
        map.setCenter(results[0].geometry.location);
        map.setZoom(8);
        marker = new google.maps.Marker({
            map            : map,
            title        : results[0]['formatted_address'],
            position    : results[0].geometry.location,
            icon        : "arrow.png",
            animation    : google.maps.Animation.DROP
        });
        markersArray.push(marker);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
            }
    });
    }


    function clearOverlays() {
    if (markersArray) {
    for (i in markersArray) {
        markersArray[i].setMap(null);
    }
    }
    }

    function testenter1(e) {
    if (e.keyCode == 13) {            
    codeAddress();
    return false;        
    }
    }


    

    
    #avatar-panel {
    position: absolute; bottom: 17px; right: 0px; margin-left: -180px;
    width: 144px; height: 53px; z-index: 1; background-color: trasparent;
    padding: 1px; border: 0px solid #999;
    }
    



    
    

    
    input {
    border: 2px solid gray;
    background: rgb(243, 243, 243);
    width: 150px;
    left: 100px;
    padding: 4px;
    position: absolute;
    z-index: 1;
    }

Answer 1

OAuth用于对您的应用程序数据进行用户级访问。如果您只想让自己的网站获得访问权限，则可以使用API密钥并限制使用API Console内的网站域名。您需要拥有一个项目并将其设置为浏览器密钥。这篇About.com文章可以帮助您了解按顺序完成所有工作的步骤。

使用OAuth的一种简单方法是使用Google's Javascript API。您可以通过使用<script src="https://apis.google.com/js/client.js?onload=init"></script>加载脚本来加载它，其中init是加载时应运行的javascript函数。

我有以下内容加载Javascript API：

function init() {
    gapi.client.load('fusiontables', 'v1', function() {
        gapi.client.setApiKey( YOUR_API_KEY_AS_STRING );
        //Stuff to do once Fusion Tables API is loaded 
        gapi.client.fusiontables.query.sql({
            sql: "SELECT * FROM" + YOUR_TABLE_ID
        }).execute( YOUR_FUNCTION_ON_SUCCESS ); //Example
    });
    //Load other APIs as needed.
}

auth函数附加到单击事件处理程序，以便按钮授权OAuth请求。

function auth(e) {
    e.preventDefault();
    gapi.auth.authorize({
        'client_id': YOUR_BROWSER_API_KEY,
        'scope': 'https://www.googleapis.com/auth/fusiontables', //or other scope
        'immediate': false
    }, function() {
        //Execute this on successful auth like create another UI
    });
}

Answer 2

感谢您在另一个comment澄清。

您可以使用FusionTablesLayer添加到地图中。大多数细节可以在他们的Documentation中找到。您需要事先设置地图环境，并确保您的Fusion Table列为公开。

假设你有一个元素<div id="mapElement"></div>：

var map;
function initialize() {
    // Initialize the map
    map = new google.maps.Map(document.getElementById('mapElement'), {
        center: new google.maps.LatLng(0, 0), //Initial coordinates to center on
        zoom: 10, //Initial Zoom level
    });

    var ft = new g.FusionTablesLayer({
        query: {
            select: 'LOCATION_COLUMN_NAME', //From the Fusion Table
            from: 'TABLE_ID' //Fusion Table ID (long string in its URL)
        },
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

这与example中反映的代码相同。

如何为自由融合表配置客户端ID

2 个答案: