Отображает только часть карты API V3 проблема - PullRequest
Новая
       16

Отображает только часть карты API V3 проблема

2 голосов
/ 03 июля 2011

Я хочу использовать две (или более) карты на одной странице. (Используя telerik Grid) its two rows in telerik grid

Как видите, если я попытаюсь открыть «детали» для одной строки (это можетбыть первой, второй или последней строкой) карта будет отображаться правильно.Если вы попытаетесь расширить детали для другой строки, карта будет отображаться недействительной.Я не могу понять, что я сделал не так? 

 function onTabSelect(e) {
//...
                    if (node.childNodes.length == 0) {// If Coordinates tab not contain map
                    map = document.createElement('DIV');
                    map.setAttribute('id', selectedGeoObject.Id + "_gmap"); //Generates Id for div container
                    map.setAttribute('style', 'width:400px; height:278px; margin : 0px; padding : 0px;');
                    node.appendChild(map);
                    initMap(map);
                }
}
    function initMap(gMapContainer) {
        var myLatlng = new google.maps.LatLng(51.0, 9.0);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        //width:400px; height:278px;
        var gMap = new google.maps.Map(gMapContainer, myOptions);
        // Can not solve the problem.
        //google.maps.event.trigger(gMap, 'resize');
        //gMap.setCenter(myLatlng);
        return gMap;
    }

Если я попытаюсь изменить размер окна браузера, обе карты будут отображаться правильно (я пробовал это в Firefox, Opera, Chrome).Не могли бы вы помочь мне с этой странной ошибкой?

Ответы [ 3 ]

4 голосов
/ 03 июля 2011

Вызовите это в окне изменения размера: 

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

Как и так: (Обратите внимание, вам понадобится дескриптор gMap через document.getElementByID и т. Д.) 

window.onresize = function(event) {
 google.maps.event.trigger(gMap, 'resize');   
}
2 голосов
/ 14 марта 2013

Вы можете добавить этот код: 

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});
1 голос
/ 08 февраля 2012

Проблема заключается в том, что вы пытаетесь инициализировать карту Google внутри тега DIV с помощью style.visibility = 'hidden'

, чтобы решить эту проблему, вы должны объявить div map_canvas внутри видимого DIV, например: 

<div id="MapWindow"> 
    <div id="map_canvas" style="width:390px; height:390px; border-color: black"></div>
</div>

Теперь, если вы используете jQuery, в $ (function ()) вы должны установить видимость MapWindow в скрытом (если вы хотите, чтобы GMap запускался скрытым). 

<script type="text/javascript">

var map;
var marker;

$(function () {
    initGoogleMap();
    document.getElementById("MapWindow").style.visibility = 'hidden';
});

function initGoogleMap() {
    var latlng = new google.maps.LatLng(-30, -60);
    var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    map = new google.maps.Map(document.getElementById("map_canvas"), options);
    marker = new google.maps.Marker({
        draggable: false,
        position: latlng,
        map: map,
        title: ''
    });
}

function OpenPopupWindow()
    document.getElementById("MapWindow").style.visibility = 'visible';
    $('#MapWindow').data('tWindow').center().open();        
}

</script>

Наконец, когда вы хотите показать de DIV (или всплывающее окно, например), прежде чем показывать его, вы должны установить видимость DIV в 'visible'

;)

...