延迟加载谷歌地图不会在页面上显示地图

时间:2015-03-31 14:12:01

标签: javascript php jquery google-maps

我决定玩this jquery example。我将jquery.jsjquery.lazy-load-google-maps.min.js放在js/文件夹中的服务器上,然后将php页面放在以下代码中:

<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.lazy-load-google-maps.min.js"></script>
<script>
    ;( function( $, window, document, undefined )
    {
        $( '.google-map' ).lazyLoadGoogleMaps(
        {
            callback: function( container, map )
            {
                var $container  = $( container ),
                    center      = new google.maps.LatLng( $container.attr( 'data-lat' ), $container.attr( 'data-lng' ) );

                map.setOptions({ zoom: 15, center: center });
                new google.maps.Marker({ position: center, map: map });
            }
        });

    })( jQuery, window, document );
</script>
</head>
<body>
first:<div class="google-map" data-lat="40.7056258" data-lng="-73.97968"></div>
second:<div class="google-map" data-lat="51.5072113" data-lng="-0.1144521"></div>
third:<div class="google-map" data-lat="31.2243489" data-lng="121.4767528"></div>
fourth:<div class="google-map" data-lat="48.8588589" data-lng="2.3470599"></div>


</body>
</html>

但在浏览器中运行之后,我看到的是:

  

第一:第二:第三:第四:

没有别的。问题在哪里?

0 个答案:

没有答案