如何为空闲的融合表配置客户端id

Question

我创建了一个地图与融合表，并希望使其仅通过我的网站可见

我用Oauth为web应用程序创建了一个客户端ID，并在地图上复制了ID，但我不能使它工作

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

你能帮我找到错误吗?

感谢

我为我的英语道歉

这是页面的代码

<>之前Google Maps JavaScript API v3示例:Fusion Tables Layer函数初始化(){geocoder = new google.maps.Geocoder();var italia = new google.maps.LatLng(42.147114,13.25964);map = new google.maps.Map(document.getElementById('map-canvas')， {中心:意大利,变焦:6,mapTypeId: google.maps.MapTypeId.ROADMAP}）;变量campminuscolo = idcamping.valueVar camp = "'" + campminuscolo + "'"var camp1 = "' name '包含忽略大小写" + campvar layer = new google.maps.FusionTablesLayer({查询:{选择:"indirizzo",:"1 mmsbct8lqjkizbj-bqlyhszmgjkxujnhxlqqasgs",地点:camp1}，选择:{styleId: 2templateId: 2}，风格:[{markerOptions: {iconName:"grn_circle"}，})}）;layer.setMap(地图);}函数testenter(e) {if (e.p keycode == 13){//输入初始化();返回错误;}}var geocoder;var地图;var markersArray = [];var标记;函数codeAddress() {var address = document.getElementById("address").value;geocoder。Geocode ({'address': address}，函数(结果，状态){if (status == google.maps.GeocoderStatus.OK) {clearOverlays ();. getelementbyid("地址")。Value = results[0]['formatted_address'];map.setCenter(结果[0].geometry.location);map.setZoom (8);marker = new google.maps.Marker({地图:地图;Title: results[0]['formatted_address']，Position: results[0].geometry.location;图标:"arrow.png";动画:google.maps.Animation.DROP}）;markersArray.push(标记);} else {alert("由于以下原因，地理代码未成功:" + status);}}）;}函数clearOverlays() {if (markersArray) {for (i in markersArray) {markersArray[我].setMap(空);}}}功能testenter1(e) {if (e.keyCode == 13) {codeAddress ();返回错误;}}# avatar-panel {位置:绝对的;底部:17 px;右:0 px;margin-left: -180 px;宽度:144 px;高度:53 px;z - index: 1;background - color: trasparent;填充:1 px;边框:0px实线#999;}输入{边框:2px纯灰色;背景:rgb(243,243,243);宽度:150 px;左:100 px;填充:4 px;位置:绝对的;z - index: 1;}

Answer 1

OAuth用于对应用程序数据进行用户级访问。如果您只希望您的站点具有访问权限，您可以使用API密钥并在API控制台中将其限制为您站点的域。您需要有一个项目，并将其设置为浏览器密钥。这篇关于About.com的文章可以帮助你展示让一切井然有序的步骤。

一个简单的方法来完成使用OAuth是使用谷歌的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

感谢你在另一条评论中澄清。

你可以利用添加一个FusionTablesLayer到你的地图。大多数细节可以在他们的文档中找到。你需要事先设置一个地图环境，并确保你的Fusion Table被列为public。

假设你有一个元素<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);