Javascript 使用modernizr.js/yepnope.js加载谷歌地图API_Javascript_Google Maps_Modernizr_Yepnope

Javascript 使用modernizr.js/yepnope.js加载谷歌地图API

javascript google-maps

Javascript 使用modernizr.js/yepnope.js加载谷歌地图API,javascript,google-maps,modernizr,yepnope,Javascript,Google Maps,Modernizr,Yepnope,有没有人有任何可以使用modernizr.load或yepnope加载谷歌地图API的工作代码我能够使用modernizr加载JQuery和GMap3，但是除非我使用传统的脚本标记，否则GoogleMapsAPI无法工作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Please help me load Google Maps API with

有没有人有任何可以使用modernizr.load或yepnope加载谷歌地图API的工作代码

我能够使用modernizr加载JQuery和GMap3，但是除非我使用传统的脚本标记，否则GoogleMapsAPI无法工作

<!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>

但是，如果我做了此更改，则不会加载映射，并且现在在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.

这是我能想到的最好的办法：-

    <script>
        Modernizr.load([{load: [
            'preload!//maps.googleapis.com/maps/api/js?sensor=false&callback=loaded',
            '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
            '/js/gmap.jquery-5.1.1.min.js',
        ], complete: function () {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = '//maps.googleapis.com/maps/api/js?sensor=false&callback=loaded';
            document.body.appendChild(script);
        }}]);

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


Modernizer.load（[{load:[
'预加载！//maps.googleapis.com/maps/api/js？sensor=false&callback=load'，
“//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”，
“/js/gmap.jquery-5.1.1.min.js”，
]，完成：函数（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src='//maps.googleapis.com/maps/api/js？sensor=false&callback=loaded'；
document.body.appendChild（脚本）；
}}]);
函数加载（）{
$（文档）.ready（函数（）{
pageInit（）；
});
}

它似乎更快的预加载！不过，根据Firebug告诉我的，我认为它会两次抓取该文件。

更改访问控制允许源文件头，允许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);

Hmmmmm。。。。。“常见问题是，您不能在使用yepnope加载的脚本中使用document.write（）（这意味着没有谷歌地图或广告）。对于每个异步脚本加载程序都是如此。但我们建议您始终避免使用document.writes。”
<?php header('Access-Control-Allow-Origin: http://maps.googleapis.com/maps/api/js*', true);