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

admin管理员组

文章数量:1327488

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?

• javascript
• google-maps-api-3
• telerik-mvc

Share Improve this question Follow edited Jul 3, 2011 at 12:38 Trott 70.2k2727 gold badges182182 silver badges217217 bronze badges asked Jul 3, 2011 at 9:07 LeonidLeonid 1,11122 gold badges1717 silver badges2727 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: 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'

;)

本文标签： javascriptDisplays only part of map API V3 problemStack Overflow