-1

ページに同じマップの 2 つのバージョンがあります。1 つは CSS を使用して小さくし、サイドバーに表示します。もう 1 つはより大きく、小さいマップの上に重ねられた png をクリックすると、ライトボックスで開きます。ウェブサイトは Drupal で構築されています。小さいマップはブロック内にあり、大きいマップは独自のノード ページにあります。これらのコンテンツ アイテムは両方とも、Google マップ API js ファイルを参照しています。

サイドバーの地図リンクをクリックすると、Chrome のエラー コンソールに「警告: このページに Google Maps API が複数回含まれています。予期しないエラーが発生する可能性があります。」と表示されます。ライトボックス マップから Google マップ API js 参照を削除しようとしましたが、サイドバーのマップ リンクをクリックしても大きなマップがまったく表示されません。両方のマップに Google Maps API js がある場合、FireFox ですべて正常に動作します。IE、Chrome、および Safari では機能しません。

これを正しく機能させるためのヒントはありますか? リンクがクリックされ、大きなマップがライトボックスで開いたときに、小さなサイドバー マップの js を動的に「殺す」方法はありますか?

4

1 に答える 1

2

メッセージにあるように、API は 1 回だけ含める必要があります。API を 1 回ロードするだけで、任意の数のマップ インスタンスを作成できます。

常に小さな地図を読み込むため、簡単な解決策の 1 つは、Maps API<script>タグを削除するかdrupal_add_js()、大きなライトボックス マップを作成するノードから呼び出すことです。もちろん、スタンドアロン ページとして開いた場合、そのノードでマップを表示することはできなくなります。Maps API が既に含まれているページの一部としてのみ機能します。

または、条件付きで Maps API スクリプトをページに 1 回だけ含めることもできます。私の PHP と Drupal のコーディングは少しさびていますが、次のようになると思います。

if( ! $mapsApiLoaded ) {
    $mapsApiLoaded = TRUE;
    drupal_add_js(
        'https://maps.googleapis.com/maps/api/js?sensor=false',
        'external'
    );
}

drupal_add_js()そのままの呼び出しやタグの代わりに、ブロックとノードでそのコードを使用すると<script>、API を 1 回だけロードする必要があります。

(もちろん、車両の追跡などを行っている場合は、 Maps API の利用規約をsensor=false読むsensor=true必要があります)。

または、Drupal で一度 .js ファイルをロードする別の方法を次に示します。

興味深いことに、何年も前に関数に「一度だけロード」機能を追加することについて議論がありましたが、「修正しない」として解決されました。:-(drupal_add_js()

純粋な JavaScript でも同様のことができます。まだロードされていないことを確認した後、Maps APIdocument.write()のタグを記述するために使用します。<script>

<script>
    function loadMapsAPI() {
        if( window.google && google.maps )
            return;
        document.write(
            '<script src="',
                'https://maps.googleapis.com/maps/api/js',
                '?v=3&sensor=false',
            '">',
            '<\/script>'
        );
    }
</script>

次の方法でテストします。

<script>
    loadMapsAPI();
</script>

<script>
    loadMapsAPI();
</script>

<script>
    // Normal Maps API initialization code here
</script>

この方法ではできないことに注意してください。

<script>
    loadMapsAPI();
    // Normal Maps API initialization code here
</script>

これは、document.write()inが現在のタグの後に API のタグをloadMapsAPI()書き出すためです。したがって、その呼び出しと残りのマップ初期化を同じタグに入れると、それらは間違った順序になります。<script><script><script>

<script>
    loadMapsAPI();
    // Normal Maps API initialization code here
</script>
... The Maps API <script> generated by document.write is *here* ...

loadMapsAPI()関数定義と呼び出しを同じ<script>タグで組み合わせても問題ありません。

<script>
    function loadMapsAPI() {
        if( window.google && google.maps )
            return;
        document.write(
            '<script src="',
                'https://maps.googleapis.com/maps/api/js',
                '?v=3&sensor=false',
            '">',
            '<\/script>'
        );
    }
    loadMapsAPI();
</script>

または、関数にしないでください：

<script>
    if( !( window.google && google.maps ) ) {
        document.write(
            '<script src="',
                'https://maps.googleapis.com/maps/api/js',
                '?v=3&sensor=false',
            '">',
            '<\/script>'
        );
    }
</script>

<script>次に、必要な場所でそのタグを繰り返します。

これらの<script>タグを PHP コードから生成している場合は、さらにエスケープや引用を行う必要があるかもしれませんが、私は PHP の専門家ではないので、その部分を理解できるようにします。

于 2013-07-26T16:31:04.050 に答える