如何在另一个域上的iframe中使用谷歌地图时处理谷歌apikey

时间:2016-07-31 15:53:28

标签: google-maps iframe google-maps-api-3

我有一个网页,上面有谷歌地图和几个标记。这些标记表示我在数据库中拥有的特定数据。点击标记后,地图下方的详细信息会显示照片。 一些本地企业有兴趣在自己的商业网站上拥有相同的页面。我正考虑在iFrame中提供此服务,以便本地企业只需添加3行代码即可拥有相同的整页。

我在这里面临谷歌地图的配额限制使用问题。我希望企业在iframe网址中提供它自己的apikey,这样我就可以在显示地图时使用它。但iframe中的REFERER URL将是我的域名,而不是业务域名。这将导致问题,并且apikey仅限于特定网址。 有什么建议吗?

1 个答案:

答案 0 :(得分:0)

您可以在iframe中将客户端ID或名称作为查询参数发送,然后使用javascript检查客户端ID或名称,并根据客户端动态地包含google map javascript。这将允许您为每个客户端包含不同的密钥。客户端必须向您提供其api密钥,并将您的网站添加到允许使用该密钥的域列表中。

function includeGoogleMap()
{

// get client id or name from query parameter 
    var client = getParameterByName('clientid'); 

    if(client == "ABC"){
       document.write('<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=ABCKEY"></script>');
    }else if(client == "DEF"){
       document.write('<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=DEFKEY"></script>');
    }
    else if(client == "GHI"){
       document.write('<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=GHIKEY"></script>');
    }
}

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}