在其他域名的iframe中使用google地图时，如何处理google apikey

Question

我有一个谷歌地图和它的几个标记的网站页面。这些标记代表我在数据库中拥有的特定数据。点击一个标记，地图下方的详细信息就会与照片一起出现。一些本地企业有兴趣在他们自己的商业网站上有相同的页面。我在考虑在iFrame中提供此服务，这样本地企业只需添加3行代码即可获得相同的完整页面。

在这里，我面临着谷歌地图配额限制使用的问题。我希望企业在iframe url中提供自己的apikey，以便我可以在显示地图时使用它。但是iframe中的REFERER URL将是我的域，而不是业务域的域。这将导致问题，因为和apikey被限制为特定的url。有什么建议吗？

Answer 1

您可以在iframe中将客户端id或name作为查询参数发送，然后使用javascript检查客户端id或name，并根据客户端动态包含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, " "));
}