最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Displays only part of map API V3 problem - Stack Overflow

programmeradmin0浏览0评论

I want to use two(or more) maps on one page.(using telerik Grid)

As you see, If I will try to open "details" for one row(It could be first, second, or last row) map will be displayed correctly. If will try to expand details for another row, map will be displayed not valid. I cannot understand what have I done wrong?

 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;
    }

If I will try to resize my browser window, both maps will be displayed correctly(I've tried this in Firefox, Opera, Chrome). Could you help me with this strange bug?

I want to use two(or more) maps on one page.(using telerik Grid)

As you see, If I will try to open "details" for one row(It could be first, second, or last row) map will be displayed correctly. If will try to expand details for another row, map will be displayed not valid. I cannot understand what have I done wrong?

 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;
    }

If I will try to resize my browser window, both maps will be displayed correctly(I've tried this in Firefox, Opera, Chrome). Could you help me with this strange bug?

Share Improve this question edited Jul 3, 2011 at 12:38 Trott 70.2k27 gold badges182 silver badges217 bronze badges asked Jul 3, 2011 at 9:07 LeonidLeonid 1,1112 gold badges17 silver badges27 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

Call this on the window resize:

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

Like So: ( Note you'll need the gMap handle via document.getElementByID etc )

window.onresize = function(event) {
 google.maps.event.trigger(gMap, 'resize');   
}

You can add this code:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

The problem is when you try to initialize a Google Map inside a DIV tag with style.visibility ='hidden'

to solve this, you have to declare the map_canvas div inside a visible DIV, for example:

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

now, if you're using jQuery, in $(function()) you should set 'MapWindow' visibility in hidden (if you want that GMap starts hidden).

<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>

Finally, when you wan to show de DIV (or popup window, for example), before show it, you have to set the DIV visibility in 'visible'

;)

发布评论

评论列表(0)

  1. 暂无评论