4

modernizr.load または yepnope を使用して Google Maps API をロードできるようにする作業コードを持っている人はいますか?

modernizr を使用して JQuery と GMap3 をロードできますが、従来のスクリプト タグを作成しない限り、Google Maps API は機能しません。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Please help me load Google Maps API with modernizr!</title>
    <style>
        #map { width: 500px; height: 300px; }
    </style>
    <script src="/js/modernizr-2.6.2.min.js"></script>
</head>

<body>
    <h1>Please help me load Google Maps API with modernizr!</h1>

    <div id="map">
        Placeholder
    </div>

    <script>
        function pageInit() {
            $("#map").gmap3({
                map:{
                    options: {
                        center: [18.01714, -76.750113],
                        zoom: 15,
                        mapTypeId: google.maps.MapTypeId.TERRAIN,
                    }
                }
            });
        }
    </script>


    <!-- I WANT TO REMOVE THE SCRIPT TAG BELOW AND REPLACE WITH MODERNIZR LOAD! -->
    <script src="//maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
    <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->


    <script>
        Modernizr.load([{load: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
            '/js/gmap.jquery-5.1.1.min.js',
        ],complete: function () {loaded();}},]);

        function loaded() {
            $(document).ready(function() {
                pageInit();
            });
        }
    </script>
</body>
</html>

スクリプトタグを削除した後、次の変更を行う必要があることをロジックは教えてくれます:-

Modernizr.load([{load: [
    '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
    '//maps.google.com/maps/api/js?sensor=false&amp;language=en',
    '/js/gmap.jquery-5.1.1.min.js',

しかし、この変更を行うと、マップが読み込まれず、Javascript コンソールに次のエラーが表示されます:-

Load denied by X-Frame-Options: http://maps.google.com/maps/api/js?sensor=false&amp;language=en does not permit cross-origin framing.
4

2 に答える 2

0

Access-Control-Allow-Origin ヘッドを変更して、Google の API URL をページ ヘッダーに許可すると、セキュリティの問題が解消されます。

たとえば、Apache .htaccess:

Header set Access-Control-Allow-Origin "http://maps.googleapis.com/maps/api/js*"

またはphp経由：

<?php header('Access-Control-Allow-Origin: http://maps.googleapis.com/maps/api/js*', true);

私はそのようなことをすることのセキュリティへの影響について100％ではありませんが. Google API は大きなライブラリです。http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurityとセクションを参照してくださいProcessing rogue COR

補足として、すべてのリクエストに追加のヘッダーが追加されるため、私はこれのファンでもありません。

于 2014-03-25T01:06:19.323 に答える