Карта Google загружена не полностью, когда я открываю элемент проверки, она будет работать

Я интегрировал карту Google на свой веб-сайт, но когда я открываю карту элемента проверки, она будет работать, а когда я закрываю карту, она исчезает. Пожалуйста, дайте мне знать, в чем проблема

перед введите здесь описание изображения

После открытия осмотрите элемент.

введите здесь описание изображения

Код здесь

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>

<body>


    <input type="text" id="latitude" placeholder="latitude">
    <input type="text" id="longitude" placeholder="longitude">
    <div id="map" style="width:500px; height:500px"></div>


    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {
            var $latitude = document.getElementById('latitude');
            var $longitude = document.getElementById('longitude');
            var latitude = -25.363882;
            var longitude = 131.044922;
            var zoom = 7;

            var LatLng = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById('map'), mapOptions);


            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag Me!',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (marker) {
                var latLng = marker.latLng;
                $latitude.value = latLng.lat();
                $longitude.value = latLng.lng();
            });


        }
        initialize();
    </script>

</body>

</html>

google-maps google-maps-api-3 map inspect
person Pritesh Mahajan    schedule 20.05.2014    source источник
comment
Некоторый код был бы интересен   -  person Dr.Molle    schedule 20.05.2014
comment
Добавленный код явно не тот код, который использовался для создания карты на скриншотах.   -  person Dr.Molle    schedule 20.05.2014
comment
Не просто вызывайте функцию initialize напрямую. Добавьте прослушиватель событий при загрузке окна: google.maps.event.addDomListener(window, 'load', initialize);   -  person duncan    schedule 20.05.2014
comment
Пожалуйста, проверьте ссылку ниже, я столкнулся с той же проблемой, у меня есть 2 вкладки на странице jsfiddle.net/KhwZS/1300   -  person Pritesh Mahajan    schedule 20.05.2014

Ответы (3)


arrow_upward
6
arrow_downward

Поместите этот код после создания маркера или загрузки карты:

google.maps.event.addListenerOnce(map, 'idle', function () {

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

});

Событие idle запускается, когда карта становится бездействующей после панорамирования или масштабирования.

Мы используем метод resize после того, как карта становится бездействующей, это означает, что вся загрузка завершена. Таким образом, код ожидает события простоя карты (когда вся обработка на карте остановлена), затем он выполняет метод resize, который перерисовывает карту до правильных размеров.

person kumar    schedule 21.10.2016

arrow_upward
4
arrow_downward

Объяснить, что происходит, когда вы открываете инструменты разработчика: изменяется размер области просмотра окна, срабатывает событие изменения размера окна, и размер карты будет пересчитан. То же самое произойдет, когда вы измените размер окна любым другим способом.

Относительно использования вкладок(http://jsfiddle.net/KhwZS/1300/ ): Вкладка карты изначально скрыта (размер карты равен 0x0), инициировать событие изменения размера окна, когда вкладка карты активирована (что приведет к пересчету карты). размер):

$( ".tabs" ).tabs({
    activate: function( event, ui ) {if(ui.newPanel.has('#map-canvas')){
        google.maps.event.trigger(window,'resize',{});};}
});

Демонстрация: http://jsfiddle.net/KhwZS/1476/

Поскольку до сих пор неясно, какой код создает карту на снимке экрана, мой ответ таков: инициировать событие изменения размера окна или карты при отображении карты.

person Dr.Molle    schedule 20.05.2014

arrow_upward
0
arrow_downward

Позвоните google.maps.event.trigger(map, "resize"); после загрузки карты, проверьте демонстрацию скрипки,

ДЕМО

person Wit Wikky    schedule 20.05.2014