页面重新加载后，Google地图变为灰色

Question

我有以下javascript，以便通过点击谷歌地图上的点来获取经度和纬度。 当我访问页面时，最初地图加载并且所有工作都可以正常点击并获取坐标，但在重新加载页面后，地图变为灰色，并且Web浏览器控制台内不会显示任何错误。 知道我可能有什么问题以及如何解决这个问题吗？

    function getCookie(name) {
        var cookie = document.cookie;
        var prefix = name + "=";
        var begin = cookie.indexOf("; " + prefix);
        if (begin == -1) {
            begin = cookie.indexOf(prefix);
            if (begin != 0) return null;
        } else {
            begin += 2;
            var end = document.cookie.indexOf(";", begin);
            if (end == -1) {
                end = cookie.length;
            }
        }
        return unescape(cookie.substring(begin + prefix.length, end));
    }
    function initialize() {
        var myCookie = getCookie("other_lat_lng");

        if (myCookie == null) {
            var myLatlng = new google.maps.LatLng(40.713956, -74.006653);
            var myOptions = {
                zoom: 9,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                draggable: true,
                position: myLatlng,
                map: map,
                title: "Your location"
            });
            var circle = new google.maps.Circle({
                map: map,
                radius: 24140,    // 15 miles in metres
                fillColor: '#08aa23'
            });
            circle.bindTo('center', marker, 'position');

            google.maps.event.addListener(marker, 'dragend', function(event) {
                document.getElementById("lat").value = event.latLng.lat();
                document.getElementById("lng").value = event.latLng.lng();
                getAddress(event.latLng);
                var cookie_val = ('other_lat_lng', event.latLng.lat() + "," + event.latLng.lng())
                document.cookie = "other_lat_lng=" + escape(cookie_val);
            });

            google.maps.event.addListener(map, 'click', function(event) {
                document.getElementById("lat").value = event.latLng.lat();
                document.getElementById("lng").value = event.latLng.lng();
                marker.setPosition(event.latLng);
                getAddress(event.latLng);
                var cookie_val = ('other_lat_lng', event.latLng.lat() + "," + event.latLng.lng())
                document.cookie = "other_lat_lng=" + escape(cookie_val);
            });

        } else {
            array = myCookie.split(',');
            var split_1 = array[0];
            var split_2 = array[1];
            var myLatlng = new google.maps.LatLng(split_1, split_2);
            var myOptions = {
                zoom: 9,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                draggable: true,
                position: myLatlng,
                map: map,
                title: "Your location"
            });
            var circle = new google.maps.Circle({
                map: map,
                radius: 24140,    // 15 miles in metres
                fillColor: '#08aa23'
            });
            circle.bindTo('center', marker, 'position');

            google.maps.event.addListener(marker, 'dragend', function(event) {
                document.getElementById("lat").value = event.latLng.lat();
                document.getElementById("lng").value = event.latLng.lng();
                getAddress(event.latLng);
                var cookie_val = ('other_lat_lng', event.latLng.lat() + "," + event.latLng.lng())
                document.cookie = "other_lat_lng=" + escape(cookie_val);
            });

            google.maps.event.addListener(map, 'click', function(event) {
                document.getElementById("lat").value = event.latLng.lat();
                document.getElementById("lng").value = event.latLng.lng();
                marker.setPosition(event.latLng);
                getAddress(event.latLng);
                var cookie_val = ('other_lat_lng', event.latLng.lat() + "," + event.latLng.lng())
                document.cookie = "other_lat_lng=" + escape(cookie_val);
            });
        }
        var a_message = "<%= I18n.t 'map_other' %>"

        var geocoder;
        geocoder = new google.maps.Geocoder();
        function getAddress(latLng) {
            geocoder.geocode( {'latLng': latLng},
                function(results, status) {
                    if(status = google.maps.GeocoderStatus.OK) {
                        if(results[0]) {
                            document.getElementById("address").value = results[0].formatted_address;
                        }
                        else {
                            document.getElementById("address").value = a_message;
                        }
                    }
                    else {
                        document.getElementById("address").value = status;
                    }
                });
        }


    }
    google.maps.event.addDomListener(window, "load", initialize());

#map_canvas { margin: 0; padding: 0; height: 100%; width: 100% }

<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><input type="text" id="address" size="30"><br><input type="text" id="lat" size="10"><input type="text" id="lng" size="10">
    <div id="map_canvas"></div>

Answer 1

我认为此问题之前已被问过。 Answer is taken from stackoverflow question 13525749

我遇到了类似的问题，resize解决了这个问题。

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});