仅在页面刷新后加载 Google Maps API v3

Dar*_*ung 4 javascript jquery google-maps google-maps-api-3

我正在为我正在处理的网页摆弄 Google Maps API。我现在的问题是,地图完全按照我的意图加载,但只能在刷新页面后加载。如果我不刷新页面,我看到的只是画布。如果我离开该页面并返回该页面,问题仍然存在,因此将地图调用到initialize.

编码:

<style>
    #map_canvas {
    width: 670px;
    height: 400px;
    background-color: #CCC;
    }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function initialize() {

        var myLatLng = new google.maps.LatLng(31.247681, 121.449504);

        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
        center: new google.maps.LatLng(31.248195, 121.447431),
        zoom: 16,
                mapTypeControl: false,
                panControl: false,
        zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(map_canvas, map_options);

        var contentString =
            '<b>Leung Gallery</b>' +
            '<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
            '<p>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        google.maps.event.trigger(map, 'resize');

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map,marker);
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>?
Run Code Online (Sandbox Code Playgroud)

浏览以前的问题,我没有找到任何与我的问题完全匹配的内容,但我看到了一些类似的情况,google.maps.event.addDomListener(window, 'load', initialize);所以我认为这可能是问题所在。任何帮助表示赞赏。

编辑:指向正确的方向。解决问题$(document).bind("projectLoadComplete", initialize);后添加google.maps.event.addDomListener(window, 'load', initialize);。问题是使用导航时页面未完全加载。这个问题可能是 Cargo Collective 平台独有的。

小智 5

经过几个小时的不成功搜索解决方案后,我终于找到了这个:

只需更换:

google.maps.event.addDomListener(window, 'load', initialize);
Run Code Online (Sandbox Code Playgroud)

和:

$(document).ready(function(){
  initialize();
});
Run Code Online (Sandbox Code Playgroud)