別のドメインのiframe内でGoogleマップを使用しているときにgoogle apikeyを処理する方法

Question

Googleマップといくつかのマーカーが付いたウェブサイトページがあります。これらのマーカーは、自分のデータベースで所有する特定のデータを表します。マーカーをクリックすると、写真の下に地図の下の詳細が表示されます。 地元の企業によっては、自分のビジネスウェブサイトで同じページを使用することに興味がある場合があります。私はiFrame内でこのサービスを提供することを考えていたので、ローカルビジネスは同じフルページを持つために3行のコードを追加するだけでした。

ここで私はGoogleマップの割り当て制限の問題に直面しています。私は、iframeのURLに独自のapikeyを提供して、地図を表示するときに使用できるようにしたいと考えています。しかしiframe内のREFERER URLは私のドメインであり、ビジネスドメインではありません。それは問題を引き起こし、apikeyは特定のURLに限定されます。 提案がありますか？

Answer 1

iframeのクエリパラメータとしてクライアントのIDまたは名前を送信してから、クライアントのIDまたは名前をjavascriptで確認し、クライアントに基づいてGoogleマップの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, " ")); 
}